CODEWITHSUNDEEP
javascriptjquery
PHPNooblet
PHPNooblet

Reputation: 695

Jquery fadein and fadeout script not working

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

Upvotes: 1

Views: 405

Answers (1)

cletus
cletus

Reputation: 625087

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.

Upvotes: 3

Related Questions