简体   繁体   中英

fadeIn doesn't work jquery

css

 .wrap_result {
        background-color: #f0f2f0;
        border: 2px solid orangered;
        padding: 20px;
        position: fixed;
        left: 35%;
        top: 45%;
        width: 400px;
        height: 150px;
        text-align: center;
        display: none;
        z-index: 5005;
    }

script

 $('#removeSelected').click(function (e) {
            $('#qty').removeAttr('required');
            $('#product_id').removeAttr('required');
            var checked = $("input[type=checkbox]:checked").length;
            var cboxCount = $('input:checkbox').length;

            if (!checked) {
                $('.wrap_result')
                    .text('No selected items')
                    .fadeIn(3000).fadeOut(3000);
                e.preventDefault();
            }
        ]);

When Im trying to remove products with 0 products selected im preventing form submit and informing user about it. Alert works just fine, but this custom window doesn't work :c

I think the problem was the typo, Check this out!

 $(function(){ console.log('test') $('#removeSelected').click(function (e) { $('#qty').removeAttr('required'); $('#product_id').removeAttr('required'); var checked = $("input[type=checkbox]:checked").length; var cboxCount = $('input:checkbox').length; if (!checked) { $('.wrap_result') .text('No selected items') .fadeIn(3000).fadeOut(3000); e.preventDefault(); } }); }) 
 .wrap_result { background-color: #f0f2f0; border: 2px solid orangered; padding: 20px; position: fixed; left: 35%; top: 45%; width: 400px; height: 150px; text-align: center; display: none; z-index: 5005; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrap_result"> </div> <div> <form method="GET" action="#"> Water: <input type="checkbox" /><br/> Fire: <input type="checkbox" /><br/> Qty:<input type="text" id="qty"/><br/> Product ID:<input type="text" id="product_id" required/><br/> <button id="removeSelected">Remove</button> </form> </div> 

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM