Question

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

我知道这可能需要将每个图像拉成一个数组，然后循环获取当前位置的图像并应用动画;但我不知道该怎么做。

我不介意解决方案是使用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>

我想申请的动画是：

 var right = $('#twitt');
  right.show("fast");
  var width =  parseInt(100 * right.width() /right.parent().width() + 10,10);
  $('#twitt').animate({
      "width": "-="+ width 
  }, "slow");

所以关于上面的动画变量＆＃39;对＆＃39;将保留当前图像，因此变量＆＃39; twitt＆＃39;。

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

提前致谢！

卡勒姆

Answer 1

我会采用不同的方式。

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

@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

/* The element to apply the animation to */
.animate_me {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}

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

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

更轻更快。

Answer 2

没有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");
});

Answer 3

使用Jquery并在表下选择 img

$("table#prevWorkTable img").each(function(){
     var right = $(this);
     right.show("fast");
     var width =  parseInt(100 * right.width() /right.parent().width() + 10,10);
     right.animate({
         "width": "-="+ width 
     }, "slow");
});

循环遍历表格中的每个图像，在每个图像上执行动画

3 个答案: