Javascript 循环浏览表中的每个图像，在每个图像上执行动画

我想知道我将如何循环遍历表中的所有图像，并在每个图像上执行动画

我知道这可能需要将每个图像拉入数组，然后循环获取当前位置的图像并应用动画；但我不知道如何做到这一点

我不介意解决方案是使用Jquery还是javascript

我的表格如下：

<table id="prevWorkTable">
        <tr>
            <td><img id="twitt" src="images/prev_work_back.png" /></td>
            <td><img src="images/prev_work_back.png" /></td>
            <td><img src="images/prev_work_back.png" /></td>
        </tr>
    </table>

因此，对于上面的动画，变量“right”将保存当前图像，变量“twitt”也将保存当前图像

请不要觉得您必须编写大量代码，只需链接到类似的解决方案即可

提前谢谢

---

Callum

使用Jquery并在表下选择img

---

使用Jquery并在表下选择img

---

我会做不同的事

为名为“animate_me”的类创建CSS动画（关键帧）

将此类添加到要设置动画的元素中

$("table#prevWorkTable img").each(function(){
     var right = $(this);
     right.addClass("animate_me");
});

---

更轻更快。

我会做不同的事情

为名为“animate_me”的类创建CSS动画（关键帧）

将此类添加到要设置动画的元素中

$("table#prevWorkTable img").each(function(){
     var right = $(this);
     right.addClass("animate_me");
});

---

更轻更快。

没有CSS的另一个答案：

$("table#prevWorkTable > tr > td").each(function(){
     var right = $(this).find( "img" ); // <=== here, take IMG from TD
     right.show("fast");
     var width =  parseInt(100 * right.width() /right.parent().width() + 10,10);
     right.animate({
         "width": "-="+ width 
     }, "slow");
});

$（“table#prevWorkTable>tr>td”）。每个（函数（）{
var right=$（this）.find（“img”）；//没有CSS的另一个答案：

$("table#prevWorkTable > tr > td").each(function(){
     var right = $(this).find( "img" ); // <=== here, take IMG from TD
     right.show("fast");
     var width =  parseInt(100 * right.width() /right.parent().width() + 10,10);
     right.animate({
         "width": "-="+ width 
     }, "slow");
});

$（“table#prevWorkTable>tr>td”）。每个（函数（）{
var right=$（this.find（“img”）；//我会研究用css动画而不是js来实现这一点，你可以通过在表格中添加一个类来触发它们。我会研究用css动画而不是js来实现这一点，你可以通过在表格中添加一个类来触发它们。嗨，谢谢你的回答！这似乎不起作用。当我尝试并询问每个动画的SRC值时图像在循环中，它返回“未定义”，这使我相信它可能没有正确获取每个对象？
$（“table#prevWorkTable img”）。每个（function（）{
都无法工作。我发布了一个新的答案。使用$（this）.attr（“src”）你可以得到srcHi，谢谢你的回复！这似乎不起作用。当我尝试询问循环中每个图像的SRC值时，它返回“Undefined”，这让我相信它可能没有正确地获取每个对象？
$（“table#prevWorkTable img”）。每个（function（）{
都无法工作。我发布了一个新的答案。使用$（本节）attr（“src”）你可以得到srcHi，谢谢你的回复！好吧，这似乎是一个有趣的新方法，只有一个问题。那么我该如何添加jquery动画呢？因为在上面的例子中，你已经展示了如何使用CSS动画，但是如果需要的话，我需要执行一个需要jquery库的动画sense@CallumHolden你不用jquery用这种方式制作动画。你可以使用CSS动画。你可以用CSS制作同样的动画，只是需要一些创造力。甚至是非常惊人的动画！在我的例子中，当你添加类时，CSS动画（对于这个类）会自动激发。addClass=播放这个类的CSS动画“animate\u me”。我用与你相同的动画编辑我的问题。好的，我理解。你的JQ动画是渐进的，使用CSS你更静态。我不知道你是否可以用JQ编辑CSS
关键帧
。嗨，说实话，你上面给我的是非常有效的，非常干净和快速。我可能会更改动画以适应上述方法因为这比在后台运行大型javascript代码要好。谢谢你，这对我帮助很大+1@CallumHolden谢谢！您好，谢谢您的回复！好的，这似乎是一个有趣的新方法，只有一个问题。那么我该如何添加jquery动画呢？因为在上面的示例中，您已经展示了如何使用CSS动画然而，在上，我需要执行一个需要jquery库的动画，如果这样做的话sense@CallumHolden你不会以这种方式使用JQuery动画。你使用CSS动画。你可以用CSS制作同样的动画，只是需要一些创造性。甚至是非常惊人的动画！在我的示例中，当你添加类时，CSS动画（对于这个类）自动激发。addClass=播放该类的CSS动画“animate_me”。我用与你相同的动画编辑我的问题。好的，我理解。你的JQ动画是渐进的，使用CSS你更静态。我不知道你是否可以用JQ编辑CSS
关键帧
。嗨，说实话，你上面给我的是非常有效的，非常干净和快速。我可能会更改动画以适应上述方法因为这比在后台运行大型javascript代码要好。谢谢你，这对我帮助很大+1@CallumHolden谢谢
$("table#prevWorkTable > tr > td").each(function(){
     var right = $(this).find( "img" ); // <=== here, take IMG from TD
     right.show("fast");
     var width =  parseInt(100 * right.width() /right.parent().width() + 10,10);
     right.animate({
         "width": "-="+ width 
     }, "slow");
});