基于选择器的 jquery 切换（显示/隐藏）答案

【问题标题】：jquery toggle (show/hide) based on selector基于选择器的 jquery 切换（显示/隐藏）
【发布时间】：2013-04-11 15:09:31
【问题描述】：

我想基于jquery创建动画，下面是我的代码；

>items=document.querySelectorAll("#customers td span");
[<span alt="  02,Counter,11,2013-04-06 14:59:16">  02</span>, <span>11</span>, <span alt="  02,Counter,11,2013-04-06 13:22:19">  02</span>, <span>11</span>]
>item=items[0]; // it has a parent tag <tr> i want the whole row to blink (both spans)
<span alt="  02,Counter,11,2013-04-06 14:59:16">  02</span>
>tm=item.attributes.getNamedItem("alt");
alt="  02,Counter,11,2013-04-06 14:59:16"
>dtm=tm.value.split(',')[3];
"2013-04-06 14:59:16"

或在 JQuery 中：

$(document).ready(function() {
    window.setInterval(function(){
        $("#customers, td, #span").each(function(){
            if($(this).children("span").attr("alt")!=null)
                var dt=new Date($(this).children("span").attr("alt").split(",")[3]).getTime();
                    if(dt>$.now()-10*1000){ //am i right here??
                        console.log("animating");
                        $(this).parent().fadeOut("slow");
                        $(this).parent().fadeIn("slow");
                    }        
       });
    },1000);
});

每一秒我都想检查项目中的每个元素；如果 dtm > 当前时间 - 10 秒，则应在 500 毫秒后隐藏，并应在 500 毫秒后显示。

我上面的代码只会闪烁一个跨度，我希望两个元素都闪烁..并且此检查应每 1 秒继续一次。

谁能帮帮我..

谢谢..

【问题讨论】：

如果你能够使用 jQuery，你为什么要搞乱querySelectorAll 和attributes.getNamedItem()？您需要遍历这些项目，因此$("#customers td span").each(... 应该负责循环，然后$(this).attr("alt") 获取带有当前项目日期的属性。问题是如何将日期作为字符串（在split() 之后）并将其转换为实际日期以与当前时间进行比较？
我已经做了，现在问题是动画的流畅度..
上面的代码在 chrome 中运行，但在 firefox 中没有运行。.. 有什么帮助吗？？
stackoverflow.com/questions/15861643/…

标签： javascript jquery css css-selectors

【解决方案1】：

下面是我的最终代码；

<script>
$(document).ready(function ($) {
    window.setInterval(function(){
        $("#customers, td, span").each(function(){
            if($(this).children("span").attr("alt")!=null){
                var dt=new Date($(this).children("span").attr("alt").split(",")[3].replace(/-/g,"/")).getTime();
                if(dt>$.now()-20*1000){
                    console.log("animating");
                    $(this).parent().fadeOut(500,"linear");
                    $(this).parent().fadeIn(500,"linear");
                }
            }
        });
    },1100);
});
</script>

【讨论】：

将-webkit-transform: translateZ(0); 添加到#customers,td,span,tr，这稍微提高了动画的性能..