javascript - fadeIn 不起作用 jquery

Question

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;
    }

脚本

 $('#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();
            }
        ]);

当我尝试删除选择了 0 个产品的产品时，我会阻止表单提交并通知用户。警报工作得很好，但这个自定义窗口不起作用:c

Answer 1

我认为问题是拼写错误，请检查一下!

$(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>