javascript - FadeIn all Elements except this

Question

I am a little confused with my following example: I solely want to overlay all my td elements except 'this', so basically invert what is currently happening. Not the hovered td shall be overlayed, only the others. Can someone possibly help me?

$('td').hover(
function() {
var overlay = $('<div class="overlay">' + '</div>').hide().fadeIn(500);
$(this).find('.td-hack').append(overlay)
},
function() {
$(this).find('.overlay').fadeOut(500);
}
);

I built my current code on Jfiddle: http://jsfiddle.net/EbV2C/3/

Thank you for your time, Cheers

score 4 · Accepted Answer

我建议：

$('td').hover(    
    function () {
        var overlay = $('<div />', {'class' : 'overlay'});
        /* looking at the sibling elements of the current 'td',
           which explicitly excludes the current 'td'; looking
           within those 'td' elements for the '.td-hack' elements,
           iterating over those with the 'each()' method: */
        $(this).siblings('td').find('.td-hack').each(function(){
            /* appending a clone of the overlay element (otherwise
               that would be appended, on the first iteration and
               subsequently moved, hiding it, fading it in: */
            $(this).append(overlay.clone().hide().fadeIn(500));
        });
    },
    function () {
        $(this).siblings('td').find('.overlay').fadeOut(500);
    });

JS 小提琴演示。

或者，略有不同：

$('td').hover(
    function () {
        var overlay = $('<div />', {
            'class': 'overlay'
        });
        /* much as above, but not using 'each()', instead passing
           an anonymous function to 'append()': */
        $(this).siblings('td').find('.td-hack').append(function(i){
            return overlay.clone().hide().fadeIn(500);
        });
    },
    function () {
        $(this).siblings('td').find('.overlay').fadeOut(500);
    });

JS 小提琴演示。

要屏蔽除节点之外的整体内的所有单元格（或将覆盖附加到所有单元格）：tablethis

$('td').hover(
    function () {
        var overlay = $('<div />', {'class' : 'overlay'});
        $(this).closest('table').find('td').not(this).find('.td-hack').each(function(){
            $(this).append(overlay.clone().hide().fadeIn(500));
        });
    },
    function () {
        $(this).closest('table').find('td .overlay').fadeOut(500);
    });

JS 小提琴演示。

或者：

$('td').hover(
    function () {
        var overlay = $('<div />', {
            'class': 'overlay'
        });
        $(this).closest('table').find('td').not(this).find('.td-hack').append(function(i){
            return overlay.clone().hide().fadeIn(500);
        });
    },
    function () {
        $(this).closest('table').find('td .overlay').fadeOut(500);
    });

JS 小提琴演示。

最后，（对于现代/最新/符合标准的浏览器），一个addClass()使用以下 CSS 的解决方案：

td {
    /* changes follow: */
    -moz-transition: all 0.4s linear;
    -ms-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    -webkit-transition: all 0.4s linear;
    transition: all 0.4s linear;
}
.td-hack {
    /* no changes here */
}

td.transparency {
    /* added this: */
    opacity: 0.4;
    -moz-transition: all 0.4s linear;
    -ms-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    -webkit-transition: all 0.4s linear;
    transition: all 0.4s linear;
}

和 jQuery：

$('td').hover(
    function () {
       $(this).closest('table').find('td').not(this).addClass('transparency');
    },
    function () {
        $(this).closest('table').find('td.transparency').removeClass('transparency')
    });

JS 小提琴演示。

参考：

score 1 · Accepted Answer

这不是完成您想做的事情的最佳方式。每次悬停时，您都在添加 N 个新的 dom 元素，其中 N 是 td-hack 元素的数量...

为什么不直接为其他元素的不透明度设置动画以“淡出它们”？

例如 -

    $('td').on("mouseover", function() {
      $('td').not(this).css('opacity', 0.8);
    });

    $('td').on("mouseout", function() {
      $('td').css('opacity', 1.0);
    });

javascript - FadeIn all Elements except this

2 回答 2

Related

Reference