0

我在这里遇到了一种罕见的情况，我需要一些想法，我只是证明了很多组合，但编程不是随机的！

我有一个边框 = 1px 的表格。我也有很多，<td>里面有一张图片。基本上我的想法是，当用户单击一个图像（img）时，所有图像和表格边框都会“淡出”，除了单击的图像。所以我已经证明了很多组合，当img消失时，边框没有，或者什么都没有消失，或者一切都消失了，或者回调不起作用。到目前为止，我最好的方法是这个：

假设以下html：

<table id="entire">
<tr><td>
<table class="table1" border="1px">
<tr>
<td><img id="ebox"></td>
<td><img id="fbox"></td>
<td><img id="gbox"></td>
</tr>
</table>
</td></tr>
</table>

并假设以下 JQuery：

    $("#entire").click(function (event) {

        $('.table1 img').animate({
            opacity: 0.3
            }, 500,
            function() {


        }); //close the animate

$('#' + event.target.id).animate({
            opacity: 0.9
            }, 500,
            function() {


        }); //close the animate

    });  //close the event click

我真的证明了一切，使用 ParentNode 并调用 ，以及其他选项，例如将所有内容淡出然后淡出。

在最后一个例子中，我知道这可以做到，但我不知道怎么做。我的想法是 table1 “淡出”，除了点击图片之外，而不是在点击之后，而是在同一时间。

任何解决方法也将被视为解决方案，请在否决之前发表评论、询问更多信息或提出建议。我真的在谷歌上搜索，我也尝试使用“队列关闭，完成：”但不起作用。

更新：

最后一种方法：

$('.table1 img').not(event.target).animate({alpha: 0.3}, {
        duration: 1000,
    step: function() {
            $('.table1').css('border-color','rgba(0,0,0,'+this.alpha+')');
        }

});
4

1 回答 1

2

jQuery UI 允许彩色动画，所以安装了 jQuery UI（或它的适当部分），试试这个：

var $t = $("#entire table").on('click', 'img', function() {
    $(this).fadeIn(250);
    $t.animate('border-color', '#FFF').find('img').not(this).fadeOut(1000);
});

除非其他一些代码将其重置为原始颜色，否则您只会看到一次边框淡入淡出效果。

编辑

.fadeTo()可能比fadeIn()/好fadeOut()；因为褪色的图像仍然可以点击。

var $t = $("#entire table").on('click', 'img', function() {
    $(this).fadeTo(250, 1.0);
    $t.animate('border-color', '#FFF').find('img').not(this).fadeTo(1000, 0.2);
});
于 2012-09-11T22:32:47.910 回答