使用 animate() 的 Jquery 动画答案

【问题标题】：Jquery animation using animate()使用 animate() 的 Jquery 动画
【发布时间】：2011-01-03 18:56:04
【问题描述】：

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不工作，

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

【问题讨论】：

您能否也发布您的相关标记，并让我们知道您所写的正在在做什么，因为这将是一个很好的起点，可以帮助您到达您想去的地方.
目前，当我选择我想要的背景时，它会清除旧背景并将新背景滑入我希望我也可以将旧背景滑出
你到底为什么用ajax调用一个url来获取另一个url的一部分？
该 url 只是对我的控制器中的一个方法的调用，该方法为在 URL 中有效发送的 ID 获取适当的背景，在页面上有链接 mysite.co.uk/set_background/2，它获取背景图像id 为 2
关于获取 url 的 ajax 调用，如果您在初始页面上解析这些背景 Url 而不是额外的 ajax 请求，您会发现更好的性能。您可以直接在 href 属性中解析它，或者写出一个 json 对象直接在页面中查找：var lookup={"href1":"url1","href2":"url2"}; 然后查找 url 看起来像 var url = lookup[$(this).attr("href")]

标签： javascript jquery jquery-plugins jquery-animate

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

将原始背景设置为您想要的方向。

【讨论】：