jquery - 使用 jquery 动画 td

标签 jquery css jquery-animate

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

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

http://jsfiddle.net/s4gtp/

被点击的 td 淡入,但随后又快速淡入和淡出。我检查过 Firebug ,事件只被触发一次。我用无序列表尝试了相同的代码,一切都按预期工作。

知道为什么会发生这种情况吗?

最佳答案

尝试在第一个动画中添加 .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/

不过正如其他评论者所说,我没有看到任何“闪烁”,所以我假设您的意思是单击的元素淡出,然后又淡入...

关于jquery - 使用 jquery 动画 td,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10411769/

相关文章:

jQuery 动画不起作用

javascript - Jquery animate.({opacity} 根本不运行

javascript - 如何使用 javascript 将时间戳字符串转换为本地时间?

jquery - iframe重新加载,如何使用Scrollpane将父页面滚动到顶部

javascript - jQuery:基于容器中元素数量的 css 边距?

css - Div自动高度不起作用

jquery - 仅将文本区域自动增长到一定高度jquery css

php - Magento 1.9 RWD 主题 - 产品图片滚动

html - 响应式Web设计技巧,最佳实践和动态图像缩放技术

javascript - 动画背景图像向左滑动的最简单方法?