CODEWITHSUNDEEP
javascriptjquerycssjquery-uianimation
Sunny
Sunny

Reputation: 10095

Basic JQuery .animate() does not work but same CSS can be changed with .css()!

I have a bizzare problem which I have been trying to resolve. Its very basic but I just don't get it. Here it is. I am using JQuery to animate a simple display of a div element to a "block" from "none." I tried the following two options:

$('#fort_link').click(function(){
    $('#fort_content').animate({'display':'block'},500);

});

$('#fort_link').click(function(){
    $('#fort_content').animate({display:'block'},500);

});

I also tried with the callback function after animation is done and it does alert me but nothing really happens as far as setting the display of the div to block.

But, when I try using simple .css method as shown below, it works, as expected. I am using JQuery 1.10.2. I even tried linking to Google's Jquery UI on the CDN. I am not exactly a novice in these things... May be just missing something stupid? Please help!

$('#fort_link').click(function(){
    $('#fort_content').css('display','block');
});

Upvotes: 0

Views: 91

Answers (2)

Brian Glaz
Brian Glaz

Reputation: 15696

From the jQuery docs:

All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be

So basically, you can't 'animate' block.

Upvotes: 2

Barlas Apaydin
Barlas Apaydin

Reputation: 7315

use fadeIn() or fadeOut instead:

$('#fort_link_show').click(function(){
    $('#fort_content').fadeIn(500);
});

$('#fort_link_hide').click(function(){
    $('#fort_content').fadeOut(500);
});

or fadeToogle() for shorthand.

$('#fort_link').click(function(){
    $('#fort_content').fadetoggle(500);
    //#fort_content will fadeIn if its hidden, fadeOut if its visible
});

Upvotes: 4

Related Questions