fadeIn doesn't work 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;
    }

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

Answer 1

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>