Continue animation

Continue animation

Hello folks!

I'm new in this forum, and I started with jQuery today. I hope you can help me getting started with a question I can't find in the documentation.

The problem: I want to load my 5 most recent twitter posts into a div and display them with an animation when the posts are finished loading using jQuery.ajax(). Before the posts is loaded I want the div to animate with the text "loading new twitter messages" and when the posts is loaded continue the animation to display all the posts.

Solutions so far:

1. It works nearly as I want it, but since I call hide() on the twitterLoaded() callback function once more it quickly hides before it starts the new animation.


  1. $(document).ready(function(){
            $('#twitterContent').hide();
            $("#twitter").click(function(){
                $('#twitterContent').hide();
                $("#twitterContent").html( "loading new twitter messages" );
                $("#twitterContent").animate({ height: 'show'}, 'fast');
                $.ajax({url: "twitter.php", cache: false, success: twitterLoaded });
            });
            function twitterLoaded(html){
                $("#twitterContent").hide();
                $("#twitterContent").html( html );
                $("#twitterContent").animate({ height: 'show'}, 'slow');
            }
    });












2. While writing this post I came up with this solution. It works but I don't find it very elegant. Is there a more proper way to handle this in jQuery?
  1. $(document).ready(function(){
            $('#twitterContent').hide();
            var beforeLoadHeight;
            var afterLoadHeight;
            $("#twitter").click(function(){
                $("#twitterContent").html( "loading new twitter messages" );
                beforeLoadHeight = $("#twitterContent").height();
                $("#twitterContent").animate({ height: 'show'}, 'fast');
                $.ajax({url: "twitter.php", cache: false, success: twitterLoaded });
            });
            function twitterLoaded(html){
                $("#twitterContent").html( html );
                afterLoadHeight = $("#twitterContent").height();
                $("#twitterContent").height( beforeLoadHeight + 'px');
                $("#twitterContent").animate({ height: afterLoadHeight + 'px'}, 'slow');
            }
    });

















Thanks,
Thomas