javascript - Continuously swap two inline span elements in and out using jQuery -

i have webpage contains unordered list of text (languages). on each line the english translation , native translation of language wrapped in span tags:

<li><span class="eng">german</span><span class="non">deutsche</span></li> <li><span class="eng">denmark</span><span class="non">dansk</span></li> 

all want have page toggle , forth between english span , native span ever 5 seconds or so. code below works fine except speeds on time. idea how can tweak keep constant?

function myrepeat() {      var anitime = 500;      $('.eng').fadetoggle(anitime).delay(anitime);     $('.non').fadetoggle(anitime).delay(anitime);  }  setinterval(myrepeat, 8000);  

you achieve using css on js. has benefit of being hardware accelerated , easier maintain.

you can use keyframe animation fades elements in/out. same animation can applied both span elements, delay .non elements half total animation run time, this:

@keyframes fadeinout {    0% { opacity: 0; }    5% {  opacity: 1; }    45% { opacity: 1; }    50% {  opacity: 0; }  }    li span {    opacity: 0;    animation: fadeinout 10s infinite;  }    li span.non {    animation-delay: 5s;  }

<ul>    <li>      <span class="eng">german</span>      <span class="non">deutsche</span>    </li>    <li>      <span class="eng">denmark</span>      <span class="non">dansk</span>    </li>  </ul>