jQuery的动画+背景图片交换 [英] jQuery Animation + background image swap

问题描述

我想冲我上面的使用jQuery的重量，并已运行到已经难倒了我一个问题。

基本上，我试图得到一个卡车从屏幕的左侧向动画到右侧，则当它到达屏幕的右边，卡车互换的背景图像的卡车的图像面对另一方式，然后将其动画在屏幕后面，并且将重复永远

我可以得到在屏幕上移动，并切换背景图像中的卡车，但不能把一切在某种逻辑顺序发生 - I.E.卡车背景图像交换在页面加载，而不是当左向右已完成。

下面是code，到目前为止，我认识到，语法可能是错误的，但我希望你会看到什么，我试图做的：

  $（文件）。就绪（函数（）{    $（。animationWrap），动画（{左：845px}，{工期：9000，队列：真}）{
$（。animationWrap），CSS（'背景'，'透明网址（/Resources/Images/clearence/truckLeft.png）不重复0 0'）;
}}）;
 

解决方案

使用一个回调函数的第一个 .animate ，其触发它完成后，做的事情为了（见rel=\"nofollow\"> jQuery的动画了解

  $（文件）。就绪（函数（）{    $（animationWrap。），动画（{左：845px}，9000，函数（）{
        CSS（'背景'，'透明网址（/Resources/Images/clearence/truckLeft.png）不重复0 0'）;
        动画（{左：0}，9000）;
    }）;
}）;
 

I am trying to punch above my weight with jQuery, and have run into a problem which has me stumped.

Basically, I am trying to get a truck to animate from the left hand side of the screen to the right, then when it gets to the right of the screen, the background image of the truck swaps to an image of the truck facing the other way, and it then animates back across the screen, and will repeat for ever.

I can get the truck to move across the screen, and swap the background image, but cannot get everything to happen in some sort of logical order - I.E. the truck background image is swapped on page-load and not when the left to right has completed.

Here is the code so far, and I realize that the syntax is probably wrong, but hopefully you will see what I am trying to do:

$(document).ready(function() {

    $(".animationWrap").animate({ left: "845px" }, { duration: 9000, queue: true }){
	$(".animationWrap").css('background', 'transparent url(/Resources/Images/clearence/truckLeft.png) no-repeat 0 0');
}

});

解决方案

use a callback function on the first .animate, which fires after it is complete, to do things in order (see the syntax for jQuery Animate):

$(document).ready(function() {

    $(".animationWrap").animate({ left: "845px" }, 9000, function() {
        css('background', 'transparent url(/Resources/Images/clearence/truckLeft.png) no-repeat 0 0');
        animate({ left: 0 }, 9000);
    });
});

这篇关于jQuery的动画+背景图片交换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！