jQuery带淡入淡出效果的DIVS

Question

I have a very simple script to switch out divs. I would like to add in a fading transition to the script so that it is a bit smoother. However I cannot see what I am doing wrong (totally JS incompetent) Thanks for any advice.

  jQuery(document).ready(function( $ ) {

$('#div2, #div3').hide();

$('.show').click(function () {

    $('.targetDiv').hide().fadeOut(1000);

    $('#div' + $(this).attr('target')).show();

});

});

Answer 1

Your problem lies in this line: $('.targetDiv').hide().fadeOut(1000);
What is does - it sets style display: none; to all your elements you plan to cross-fade.

Also use the right attributes: data-target="#div1" instead of target="#div1" (which is not used for that purpose)

Instead:

 jQuery(function($) { // DOM ready // get all your targetDiv elements var $fadeDivs = $(".targetDiv"); // Hide all but this one $fadeDivs.not("#div1").hide(); $('.show').click(function(evt) { // prevent the browser doing default stuff evt.preventDefault(); // get the target element - using data-target attribute! var selector = $(this).data('target'); var $target = $( selector ); // crossfade (don't forget to use .stop()) $fadeDivs.not($target).stop().fadeOut(1000); $target.stop().fadeIn(1000); }); }); 

 .targets{ position:relative; height:100px; } .targetDiv { position:absolute; height:100px; top:0; left:0;} 

 <div class="targets"> <div id="div1" class="targetDiv"><img src="//placehold.it/100x100/0bf"></div> <div id="div2" class="targetDiv"><img src="//placehold.it/100x100/f0b"></div> <div id="div3" class="targetDiv"><img src="//placehold.it/100x100/bf0"></div> </div> <a data-target="#div1" class="show">SHOW1</a> <a data-target="#div2" class="show">SHOW2</a> <a data-target="#div3" class="show">SHOW3</a> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>