JSでイメージをフェードアウトするにはどうすればいいですか？

JSを使ってfadeInとfadeOutメソッドを使ってスライドショーを作成しようとしています。問題は、次の画像がフェードインするが、前の画像はフェードアウトしないことである。JSでイメージをフェードアウトするにはどうすればいいですか？

JSコードの位置スタイルを切り替えたいので、ウェブサイトがコンテナを読み込んでコンテナ内のコンテンツを受け入れ、適切に拡大/縮小します。

私は、位置スタイルを切り替える機能を作成しました。ここで

は、私がこれまで持っているものです：

$(document).ready(function() { 
 
    $("#slideshow > div:gt(0)").hide(); 
 

 
    function toggle() { 
 
    document.getElementById("img").style.position = "absolute"; 
 
    } 
 

 
    setInterval(function() { 
 
    $('#slideshow > div:first') 
 
     .toggle() 
 
     .fadeOut(1500) 
 
     .next() 
 
     .fadeIn(1500) 
 
     .end() 
 
     .appendTo('#slideshow'); 
 
    }, 5000); 
 
});

#slideshow { 
 
    position: relative; 
 
    top: 0px; 
 
    left: 0px; 
 
    right: 0px; 
 
    bottom: 0px; 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
.center-img { 
 
    image-orientation: from-image; 
 
    position: relative; 
 
    margin: auto; 
 
    width: 100%; 
 
    height: auto; 
 
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script> 
 

 
<div id="slideshow"> 
 
    <div id="slideshow_div"> <img class="center-img" src="http://i.imgur.com/RRUe0Mo.png"> </div> 
 
    <div id="slideshow_div"> <img class="center-img" src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg"> </div> 
 
</div>

イムだけではないの次のものをフェージングする前にフェードアウトする画像を取得する方法がわから

感謝。上級者向け

出典

2016-07-21 Elden Theaker

まず（目に見えない要素に）、それはいくつかの要素を持ってしても大丈夫ではありません同じIDで

第二に、クロスフェード効果を持つために、あなたが互いの上に画像を配置し、トグル（）関数を削除する必要があります。https://jsfiddle.net/0rxqbuu5/

はあなたが目指していたものということですか？

$(document).ready(function() { 
 
    $("#slideshow > div:gt(0)").hide(); 
 

 
    function myToggle() { 
 
    $(".center-img").css("position","absolute"); 
 
    } 
 

 
    setInterval(function() { 
 
$('#slideshow > div:first') 
 
    .fadeOut(1500,function(){myToggle()}) 
 
    .next() 
 
    .css("z-index",100) 
 
    .fadeIn(1500) 
 
    .end() 
 
    .appendTo('#slideshow'); 
 
    }, 5000); 
 
});

#slideshow { 
 
    position: relative; 
 
    top: 0px; 
 
    left: 0px; 
 
    right: 0px; 
 
    bottom: 0px; 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
.slideshow_div { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    right: 0px; 
 
    bottom: 0px; 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
.center-img { 
 
    image-orientation: from-image; 
 
    position: relative; 
 
    margin: auto; 
 
    width: 100%; 
 
    height: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="slideshow"> 
 
    <div class="slideshow_div"> <img class="center-img" src="https://pixabay.com/static/uploads/photo/2014/07/27/20/29/landscape-403165_960_720.jpg"> </div> 
 
    <div class="slideshow_div"> <img class="center-img" src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg"> </div> 
 
</div>

出典

2016-07-21 11:40:02 evilpenguin

位置css要素を切り替える理由は、画像がブラウザで正確に拡大され、コンテナが画像を再調整するためです。 –

更新された回答をご覧ください。あなたがjQueryを持っているなら、getElementByIdを使用しても意味がありません – evilpenguin

<html> <head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $(".btn1").click(function(){ 
     $("p").fadeOut() 
    }); 
    $(".btn2").click(function(){ 
     $("p").fadeIn(); 
    }); 
}); 
</script> 
</head> 
<body> 

<p>This is a paragraph.</p> 

<button class="btn1">Fade out</button> 
<button class="btn2">Fade in</button> 

</body> 
</html>

DIVだから、フェードイン、それアウト

出典

2016-07-21 11:23:28

これは私の質問に答えていません。 –

だけトグルを削除し、フェードアウトのコールバック関数の中で次のものを行うことができます：ここ

は解決

$(document).ready(function() { 
 
    $("#slideshow > div:gt(0)").hide(); 
 

 
    function toggle() { 
 
    document.getElementById("img").style.position = "absolute"; 
 
    } 
 

 
    setInterval(function() { 
 
    $('#slideshow > div:first') 
 
     .fadeOut(1500,function() { 
 
      // Animation complete. 
 
      $(this).next().fadeIn(1500) 
 
      .end() 
 
      .appendTo('#slideshow'); 
 
     }) 
 
    }, 5000); 
 
});

#slideshow { 
 
    position: relative; 
 
    top: 0px; 
 
    left: 0px; 
 
    right: 0px; 
 
    bottom: 0px; 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
.center-img { 
 
    image-orientation: from-image; 
 
    position: relative; 
 
    margin: auto; 
 
    width: 100%; 
 
    height: auto; 
 
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script> 
 

 
<div id="slideshow"> 
 
    <div id="slideshow_div"> <img class="center-img" src="http://i.imgur.com/RRUe0Mo.png"> </div> 
 
    <div id="slideshow_div"> <img class="center-img" src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg"> </div> 
 
</div>

出典

2016-07-21 11:26:18

私が探していたものだけですばらしい。追加するだけで、それらを同時にフェードインまたはフェードすることは可能でしょうか？ –

私の答えを参照してください。 – evilpenguin

前のものですフェードアウトしません

あなたのコードで

： - http://api.jquery.com/toggle/ - ドキュメントを見てみると

$('#slideshow > div:first') 
    .toggle() 
    .fadeOut(1500)

あなたはそれを隠しているだけにしてfadeOutすべての

出典

2016-07-21 11:27:40

ああ、私は.toggle（）がメソッドであることに気付きませんでした。別の名前を使用するだけですか？ –

私は** bRIMOs Bor ** - あなたがカバーしていると思う*トグルを削除し、フェードアウトコールバック関数の中で次のものをやる* - 幸運！ –

JSでイメージをフェードアウトするにはどうすればいいですか？

答えて

関連する問題