ブートストラップカルーセルにフェード効果を追加する

Question

私は3つの画像カルーセルを持っています。

<div class="6u$ 12u$(medium) important(medium)"> 
<span class="image fit"><img src="screen1.png" alt="" /></span><span> class="image fit"><img src="screen2.png" alt="" /></span><span class="image fit"><img src="screen4.png" alt="" /></span></div> 

イメージはJavaScriptを使用して循環さ：

<script> 
var slideIndex = 0; 
carousel(); 

function carousel() { 
var i; 
var x = document.getElementsByClassName("image fit"); 
for (i = 0; i < x.length; i++) { 
    x[i].style.display = "none"; 
} 
slideIndex++; 
if (slideIndex > x.length) {slideIndex = 1} 
x[slideIndex-1].style.display = "block"; 
setTimeout(carousel, 8000);} 
</script> 

私は画像がで/フェードアウトさせるために私はJavaScriptに何かを追加、またはいくつかの他のトランジション効果をしたいです。これを行う簡単な方法はありますか？私は、クラス "イメージフィット"を記述するCSSをいくつか持っていますが、それは関係がないと思います。それは、画像の位置決めだけを記述する。ありがとうございました。

Answer 1

私はhere上のdivをフェードする例を作成しました。

基本的には、カルーセルが入っているコンテナにCSSのopacity: 1;を付けます。 opacity: 0;を持つ別のクラスを作成します。このクラスはjQueryを使用してトグルされ、元の不透明度値を上書きします。これは、次のjQueryコードを使用達成するために

：

$('.youTrigger').on('click', function() { 
    $('.yourContainer').toggleClass('yourClassWithOpacity0'); 
}); 

は、今あなたが、トリガーを押すと消えた容器を持っています。素晴らしいフェード効果を追加するには、次のようにコンテナにトランジションを追加する必要があります。
transition: opacity 0.5s ease;

Answer 2

私はあなたがbootsrapはjqueryのに依存しているとして、ブートストラップとフェージングのjQueryを使用することができるようになりますbeleveん - https://api.jquery.com/category/effects/fading/