Jquery fadein and fadeout script not working

Question

This function should fadeIn the id="Box" when class="display" is clicked if the Box is not animated and has a display value of none Or fadeOut if the #Box had a display value of is not none. What is wrong?

$(document).ready(function() {
    $('.display').click(function() {
     var currentDisplayValue = $('#Box').css('display');

     if (':animated') {
     stop()
     };

     else if (currentDisplayValue == 'none') {
      $('#Box').fadeIn("slow");
     };

     else {
      $('#Box').fadeOut("slow");
     };
    });

Thanks

Answer 1

Try:

$(function() {
  $(".display").click(function() {
    var box = $("#Box");
    if (box.is(":animated")) {
      box.stop();
    } else if (box.is(":hidden") {
      box.fadeIn("slow");
    } else {
      box.fadeOut("slow");
    }
  });
});

You've got some syntax errors (eg semi-colons after the curly braces) and stop() needs to be applied to a jquery set. Lastly, don't check the current display CSS value like you're doing. Use the :hidden selector instead.