jquery通过图片动画

我正在学习jquery来制作一些很酷的动画。现在我已经对图片进行了分配，这些图片扩大了，合同和不透明度的变化，最后它隐藏了。jquery通过图片动画

这里是我的代码：

function play_pic1() 
{ 
    var div = $("#img"); 
    div.animate({width:0},2000); 
    div.animate({width:1100,opacity:0},4000); 
    div.animate({opacity:1},4000); 
    div.hide(4000); 
} 

$(document).ready(function(){ 
     play_pic1(); 
     play_pic1();  
});

问题是，它仅适用于一个图像，当我尝试插入第二图像的第二图像变成静止。

我用循环和函数，但没有任何帮助。请帮助我解决这个问题。

来源

2013-01-08 Wajahat Kareem

@ Mistu4u请不要使用功课标签。正如标签描述清楚指出的那样，它已经过时了。 –

@ J.Steen，谢谢你的澄清。 – Mistu4u

您可以将要设置动画的元素作为函数的参数传递，例如

function play_pic1(element) 
{ 
    var div = $(element); 
    div.animate({width:0},2000) 
     .animate({width:1100,opacity:0},4000) 
     .animate({opacity:1},4000) 
     .hide(4000); 
} 

$(document).ready(function(){ 
     play_pic1("#img1"); 
     play_pic1("#img2");  
});

OP澄清后：如果您需要有在不同的元素顺序动画，你可以使用Deferred objects像这样

例JSBin：http://jsbin.com/ilisug/1/edit

function animate(el) 
{ 
    var div = $(el); 
    return div.animate({width:0},2000) 
     .animate({width:300,opacity:0},2000) 
     .animate({opacity:1},2000) 
     .hide(2000); 
} 

$(document).ready(function(){ 

    var dfd = $.Deferred(), 
     chain = dfd; 

    var slide = ['#el1', '#el2', '#el3']; 

    $.map(slide, function(el) { 
     chain = chain.pipe(function() { 
      return animate(el).promise(); 
     }); 
    }); 

    chain.done(function() { 
     alert('done') 
    }); 

    return dfd.resolve(); 
});

来源

2013-01-08 08:55:05 fcalderan

感谢您的帮助，这篇文章帮助我掌握了链接方法和功能。但仍然两张照片都在一起动画，我想做一个时间表示。像滑块计时器基座一样。 –

@WajahatKareem看到我的更新 – fcalderan

我没有你的帮助文字....感谢一堆。 –

那是因为你无法通过一个ID检索所有div：在HTML中只有一个id可能发生文件。

您应该使用一个类（<div class=img></div>），并与

var div = $(".img");

来源

2013-01-08 08:56:04

var div = $("#img");

上述声明说，只有#img会被引用取代

var div = $("#img");

。当你动态添加图片时，你将不得不修改你的代码。尝试传递一个ID给这个函数，并在其上应用动画。像

function play_pic1(id) 
{ 
    var div = $(id); 
    div.animate({width:0},2000); 
    div.animate({width:1100,opacity:0},4000); 
    div.animate({opacity:1},4000); 
    div.hide(4000); 
}

来源

2013-01-08 08:56:15 Rahul

的#img将适用于只有第一形象，你必须选择作为参数传递给play_pic1()

function play_pic1(elem) 
{ 
    var div = $(elem); 
    //your code here 
} 

$(document).ready(function(){ 
     play_pic1("#img"); //pass the img selector to play_pic1 
     play_pic1("#img2");  
});

来源

2013-01-08 08:57:26

我觉得你的问题是，使用sameID多元素#img只会影响第一个元素。

，而不是这个，你可以使用.img类和验证码：

function play_pic1(){ 
$(".img").each(function(){ 
    var div = $(this); 
    div.animate({width:0},2000); 
    div.animate({width:1100,opacity:0},4000); 
    div.animate({opacity:1},4000); 
    div.hide(4000); 
}); 
} 

$(document).ready(function(){ 
    play_pic1();  
});

尝试使用类$(".img")

来源

2013-01-08 09:03:29 Jai

是的，我得到了点，仍然两个图像是同心动画，我想要一个接一个来。 –

jquery通过图片动画

回答

相关问题