fadeout, load new content, fadein --> slide

问题

I am currently fading out the content of a div, replacing it with new content, and then fading it in again as follows:

area.fadeOut('400').load("file.php", 
    function(){
        $(this).fadeIn('400');
    }
);

First of all, is this chained correctly?

Secondly, I would like to replace the fading-in by sliding-in from the right, if that was possible (would need to slide the old content to the left)? How could that be achieved?

回答1:

I'd like to point out that fadeIn & fadeOut are part of jQuery Core. Do you have jQuery UI loaded in? If not, you'll need it for the version of show used in other answers.

Also, you already have the area variable, so there's no need to re-instance with S(this). It slows down the experience the more you do it.

Try this:

var newArea = area.clone().css("display", "none").insertAfter(area);
newArea.load("file.php", function() {
    area.hide("slide", {direction:"left"}, 400, function() {
        area.remove();
        area = newArea;
    });
    newArea.show("slide", {direction:"left"}, 400);

});

It should load into a hidden element then slide in from the right side as the original element slide to the left.

EDIT: Since it seems you're looking for something a little different, I'm updating the code.

回答2:

looks fine to me, just replace the call to fadeIn() with $(this).show("slide", { direction: "left" }, 400);

回答3:

area.fadeOut('400', function() {
    $(this).load("file.php", function() {
            $(this).show("slide", {direction:"left"}, 400);
    });
});

I think you need to call load like this because it might not wait for fadeOut to finish.

来源：https://stackoverflow.com/questions/6391418/fadeout-load-new-content-fadein-slide