fadein/fadeoutをスピードアップするには

Question

私は次のコードを使って毎秒イメージをフェードイン/フェードアウトしていますが、イメージはうまく動作しますが、イメージを1/2秒ごとにフェードインまたはフェードアウトしたいと思います。私はsetIntervalを500に変更することができますが、これはちょっと混乱の原因になります。私は明らかにfadeinとfadeoutをredfineする必要があります。

ブートストラップがロードされているので、機能がブートストラップjs内で定義されていると推測していますが、タイミングを再指定するにはどうすればよいですか？

var $els = $('div[id^=image]'), 
    i = 0, 
    len = $els.length; 
var start = 1; 
var end = 999999999999999; 

jQuery(function() {  
    $els.slice(1).hide(); 
    spin = setInterval(function() { 
     $els.eq(i).fadeOut(function() { 
      i = Math.floor(Math.random() * len); 
      $els.eq(i).fadeIn(); 
      }); 
     start = new Date().getTime(); 
     if (start > end) { 
      clearInterval(spin); 
      } 
     }, 1000); 

     {% for m in myusers %} 
     if (i == {{ forloop.counter0 }}) { document.getElementById('name{{ forloop.counter0 }}').style.display = 'Block';} 
     {% endfor %} 

    }); 

Answer 1

jQueryを使用しているので、fadeOut/fadeInまたはfadeToggleを使用しないでください。ここで読む

$(document).ready(function() { 
 
    setInterval(function() { 
 
    $('.a1, .a2').stop().fadeToggle(500); 
 
    }, 500); 
 
});

.wrapper { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 1px; 
 
    display: inline-block; 
 
} 
 

 
.a1, 
 
.a2 { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: blue; 
 
} 
 

 
.a2 { 
 
    display: none; 
 
    background-color: red; 
 
} 
 

 
.wrapper2 .a1 { 
 
    display: none; 
 
} 
 

 
.wrapper2 .a2 { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="a1"></div> 
 
    <div class="a2"></div> 
 
</div> 
 

 
<div class="wrapper wrapper2"> 
 
    <div class="a1"></div> 
 
    <div class="a2"></div> 
 
</div>

Answer 2

var box = document.getElementById('box'); 

function fadeOutIn(elem, speed) { 

if (!elem.style.opacity) { 
    elem.style.opacity = 1; 
} // end if 

var outInterval = setInterval(function() { 
    elem.style.opacity -= 0.02; 
    if (elem.style.opacity <= 0) { 
     clearInterval(outInterval); 
     var inInterval = setInterval(function() { 
      elem.style.opacity = Number(elem.style.opacity)+0.02; 
      if (elem.style.opacity >= 1) 
       clearInterval(inInterval); 
     }, speed/50); 
    } // end if 
}, speed/50); 

} // end fadeOut() 

fadeOutIn(box, 2000); 

こんにちは、私の解決策を参照してください。それはあなたの役に立つかどうかです。おかげさまで