使用animate（）的jQuery动画

Question

I am trying to animate background images on my site, when a background image is selected I want it to slide in from the left and push the old background out of picture, can anybody help with the code as the stuff I have written does not work,

    <script type="text/javascript">
$("a.background_btn").click(function(ev){
    ev.preventDefault();
//  alert("hello");
    var url = $(this).attr("href");
//  alert(url);
    $.ajax ({
        url : url, 
        type: "POST",
        success : function (data) {
            $('#wrapper').css('background', 'url(/media/uploads/backgrounds/'+(data)+')');
            $('#wrapper').css('background-position', '-1000px 0px');
            $('#wrapper').css('background-repeat', 'no-repeat');
            $('#wrapper').animate({backgroundPosition: '0px 0px'}) 
        }
    })
});

Answer 1

Based on your additional note, a container can only have one background at a time, so when you are setting the background in jquery, you are also removing the old background.

To get the effect you're wanting, you will either need to insert an additional element "beside" #wrapper and slide it in, or stitch your backgrounds together as a sprite image and then you can slide the single background around as needed.

That is, if you want the new background to literally "push" the old one out. If you are ok with the old background fully exiting and then the new one entering, Brandon's point may be the easiest.

Answer 2

What doesn't work about it? Does it just do nothing? If so then you are probably just running your code that attached the handler too soon (before the DOM is ready), wrap your code in a handler for that event, like so:

$(document).ready( function() {
  .. your code here ...
} );

Answer 3

before you change the background with this line

$('#wrapper').css('background', 'url(/media/uploads/backgrounds/'+(data)+')');

animate the original background to the direction you want it to go.