0

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'}) 
        }
    })
});
4

3 回答 3

1

根据您的附加说明，容器一次只能有一个背景，因此当您在 jquery 中设置背景时，您也在删除旧背景。

要获得您想要的效果，您需要在“#wrapper”“旁边”插入一个附加元素并将其滑入，或者将您的背景拼接在一起作为精灵图像，然后您可以根据需要滑动单个背景。

也就是说，如果您希望新背景从字面上“推出”旧背景。如果您可以完全退出旧背景然后进入新背景，那么布兰登的观点可能是最简单的。

于 2010-01-11T15:04:18.707 回答
0

有什么不好的？它只是什么都不做吗？如果是这样，那么您可能只是过早地运行附加处理程序的代码（在 DOM 准备好之前），将您的代码包装在该事件的处理程序中，如下所示：

$(document).ready( function() {
  .. your code here ...
} );
于 2010-01-11T14:51:46.543 回答
0

在你用这条线改变背景之前

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

将原始背景动画到您想要的方向。

于 2010-01-11T15:01:49.683 回答