CODEWITHSUNDEEP
javascriptjquery
Zaki Aziz
Zaki Aziz

Reputation: 3852

jQuery: using fadeIn() with .html()

I have a piece of jQuery code that queries a page via POST and then that page returns some text that gets displayed on the page. This is the code I am using to successfully do this:

$.post(
    "query.php?module=vote",  
    {answer: ans, pid: pid, to: to, page: page},
    function(responseText){  
        $("#poll").html(responseText);  
    },  
    "html"  
);

I've tried changing $("#poll").html(responseText) to $("#poll").html(responseText).fadeIn(1500); but it does not work.

What must I do/change to have the text fade into the page?

Upvotes: 3

Views: 2470

Answers (3)

webdevanuj
webdevanuj

Reputation: 675

Because Of Element is show by-default, so need to fadeOut/hide first then again fadeIn the elemet, like this: 

$('#element').fadeOut(500).html(content).fadeIn(500);

Upvotes: 0

Peter-Paul van Gemerden
Peter-Paul van Gemerden

Reputation: 7011

Before you can fade something in, you must make sure it's hidden. Try this:

$("#poll").html(responseText).hide().fadeIn(1500);

Alternatively, you can make sure the element is hidden using CSS:

#poll {
    display: none;
}

Live demo (showing both approaches): http://jsfiddle.net/n5rnw/1/

Upvotes: 1

HandiworkNYC.com
HandiworkNYC.com

Reputation: 11114

In order to fade in, the element must first be faded out. Try fading out instantly (0 seconds) then using a callback function to add the content and fade in.

$.post(
    "query.php?module=vote",  
    {answer: ans, pid: pid, to: to, page: page},
    function(responseText){  
        $("#poll").fadeOut(0,function(){
             $(this).html(responseText).fadeIn();
        }); 
    },  
    "html"  
);

Upvotes: 4

Related Questions