2013-04-06 4 views
0

Я хочу создать анимацию на основе jquery, ниже мой код;jquery toggle (показать/скрыть) на основе селектора

>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 секунду.

может любой мне помочь ..

Спасибо ..

+0

Если вы можете использовать jQuery, почему вы возитесь с 'querySelectorAll' и' attributes.getNamedItem() '? Вам нужно пройти через элементы, поэтому '$ (« # customers td span »). Каждый (...' должен позаботиться о цикле, а затем '$ (this) .attr (" alt ")' получает атрибут с датой для текущего элемента. Является ли проблема, как взять дату в виде строки (после 'split()') и превратить ее в фактическую дату для сравнения с текущим временем? – nnnnnn

+0

Я уже это сделал, теперь проблема заключается в гладкости анимации. –

+0

приведенный выше код работает в хроме, но не в firefox .. может ли какой-нибудь орган помочь? –

ответ

0

Ниже мой окончательный код;

<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> 
+0

добавлен '-webkit-transform: translateZ (0);' to '# customers, td, span, tr', который немного улучшил производительность анимации. –

+0

любые другие улучшения? i Я развиваю это для android .. –