CODEWITHSUNDEEP
jqueryfadeinfadeout
Matt
Matt

Reputation: 5095

Jquery FadeIn and FadeOut

I'm trying to fadeout a div element, change the text inside of it, and fade it back in...

The code I have is here -

<script>
        $(document).ready(function(){
            $("#l2").click(function(event){
                event.preventDefault();
                $("#1").fadeOut();
                $("#1").replaceWith('Testing');
                $("#1").fadeIn();
            });
        });
    </script>

l2 is clicked and it will fadeOut div id 1 replace and fade back in...but it's failing..ANy help thanks!

Upvotes: 0

Views: 159

Answers (4)

jtheman
jtheman

Reputation: 7491

In the second row you replace the element #1 with something new, then you can't fade it back in again.

$("#1").replaceWith('Testing');

results in div#1 is replaced by the text Testing

so you should instead use :

$("#1").html('Testing');

Upvotes: 0

user1026361
user1026361

Reputation: 3657

You need to use callbacks to achieve your goal:

$("#1").fadeOut(500, function(){
     $("#1").html('Testing');
     $("#1").fadeIn();
});

The function passed as a parameter will be executed when the fadeOut completes.

Upvotes: 1

Explosion Pills
Explosion Pills

Reputation: 191749

You want to use .text or .html rather than .replaceWith -- that's for working with DOM elements. Also, .text and .html do not work with the queue, so you can't chain them. You have to use the callbacks:

$("#1").fadeOut(function () {
   $(this).text('Testing').fadeIn();
});

Upvotes: 3

user1289347
user1289347

Reputation: 2407

Just use the fadeout callback. Here is a quick fiddle http://jsfiddle.net/M5PnY/2/ click the text

edit------

changed replace with html(), didn't see it before

$(document).ready(function(){
    $("#1").click(function(event){
        event.preventDefault();
        $("#1").fadeOut(function(event){
            $("#1").html('Testing').fadeIn();
        });
    });
});​

Upvotes: 0

Related Questions