使用jquery动画td

时间:2012-05-02 10:17:50

标签: jquery css jquery-animate

我正在尝试使用jquery为td的不透明度设置动画。当点击一个td时,我想为任何td设置动画并淡入已点击的td。

我遇到一个奇怪的闪烁问题:

http://jsfiddle.net/s4gtp/

点击的td会逐渐消失,但会很快淡入淡出。我检查了萤火虫,事件只被解雇了一次。我已尝试使用无序列表的相同代码,一切都按预期工作。

为什么会发生这种情况的任何想法?

1 个答案:

答案 0 :(得分:1)

尝试将.not($(this))添加到第一个动画中:

$('tr td').click(function() {
    var i = $(this).index();
    $('tr td').not($(this)).animate({'opacity': '0.1'});
    $('tr td.item' + i).animate({'opacity': "1"});
});

此外,您需要在CSS中为表格指定border-collapse:separate;。这将解决您在Firefox中遇到的问题:

这是一个更新的jsFiddle给你> http://jsfiddle.net/s4gtp/4/

正如其他评论者所说的那样,我没有看到任何“闪烁”,所以我认为你的意思是被点击的元素淡出,然后逐渐消失......