1

我正在学习 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();       
});

问题是它只适用于一张图片，当我尝试插入第二张图片时，第二张图片变成静态的。

我使用了循环和函数，但没有任何帮助。请帮助我克服这个问题。

4

5 回答 5

2

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

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-08T08:55:05.597 回答
1

那是因为您无法通过一个 ID 检索所有 div ：在 HTML 文档中只能出现一次 id 。

您应该使用一个类 ( <div class=img></div>) 并替换

var div = $("#img");

和

var div = $(".img");
于 2013-01-08T08:56:04.413 回答
1 
var div = $("#img");

上面的声明说只有#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-08T08:56:15.383 回答
1

将#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-08T08:57:26.007 回答
1

我认为您的问题是，对多个元素使用 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-08T09:03:29.730 回答