jQuery Animation fondu en fondu

Question

J'ai 12 diapositives avec des images. Je veux utiliser des animations jQuery ou un effet de fondu entrant/sortant. Voici mon code:

$('#Li4').click(function() { 
    $('#bnrImg').fadein(1000); 
    $('#chnlLogo').fadein(1000); 
    $('#mainBanner').css('backgroundColor', '#FBB03E'); 
    $('#bnrImg').attr('src', 'images/cBanners/bnr_neuro.png'); 
    $('#chnlLogo').attr('src', 'images/images.png'); 
    $('#chnlLink').attr('href', 'http://link.tv'); 
    $('#bnrImg').fadeout(1000); 
    $('#chnlLogo').fadeout(1000); 
}); 
$('#Li5').click(function() { 
    $('#bnrImg').fadein(1000); 
    $('#chnlLogo').fadein(1000); 
    $('#mainBanner').css('backgroundColor', '#DB7EB4'); 
    $('#bnrImg').attr('src', 'images/cBanners/bnr_diabetes.png'); 
    $('#chnlLogo').attr('src', 'images/image.png'); 
    $('#chnlLink').attr('href', 'http://link.com'); 
    $('#bnrImg').fadeout(1000); 
    $('#chnlLogo').fadeout(1000); 
}); 

Mais le problème est, quand je clique à # LI5 de # LI4, le #bnrImg et #chnlLogo font leur animation ou fade in/fade out après avoir cliqué. Je veux avoir l'effet de fondu après avoir cliqué sur une diapositive, puis fondu automatiquement dans les images juste après le changement de diapositive. Merci.

Answer 1

Vous souhaitez probablement examiner les fonctions de rappel disponibles pour les méthodes fadein/out. Peut-être que les méthodes stopPropagation et preventDefault peuvent vous aider.

Answer 2

Ok. Jere est un exemple de code complet. Il suffit de coller dans une page Web et changer tous les chemins d'image:

code HTML:

<div id="galleryContainer"> 
    <div id="photoShow"> 
    <div class="current"><img src="assets/banner/banner_one.jpg" width="900" height="324" class="gallery" /></div> 
    <div><img src="assets/banner/banner_two.jpg" width="900" height="324" class="gallery" /></div> 
    <div><img src="assets/banner/banner_three.jpg" width="900" height="324" class="gallery" /></div> 
    <div><img src="assets/banner/banner_four.jpg" width="900" height="324" class="gallery" /></div> 
    <div><img src="assets/banner/banner_five.jpg" width="900" height="324" class="gallery" /></div> 
    <div><img src="assets/banner/banner_six.jpg" width="900" height="324" class="gallery" /></div> 
    </div> 
</div> 

code CSS:

#galleryContainer { 
    width:900px; 
    height:330px; 
    margin:0 auto; 
    position:relative; 
    padding-bottom:10px; 
} 
#photoShow { 
    position:relative; 
    width:900px; 
    height:324px; 
    margin:0 auto; 
} 
#photoShow div { 
    position:absolute; 
    z-index: 0; 
    margin-top:8px; 
} 
#photoShow div.previous { 
    z-index: 1; 
} 
#photoShow div.current { 
    z-index: 2; 
} 

Et voici votre code jQuery:

$(function() { 
    setInterval("rotateImages()", 5000); 
}); 
function rotateImages() { 
    var curPhoto = $('#photoShow div.current'); 
    var nxtPhoto = curPhoto.next(); 
    if (nxtPhoto.length == 0) 
    nxtPhoto = $('#photoShow div:first'); 
    curPhoto.removeClass('current').addClass('previous'); 
    nxtPhoto.css({ opacity: 0.0 }).addClass('current').animate({ opacity: 1.0 }, 2000, 
    function() { 
     curPhoto.removeClass('previous'); 
    }); 
    } 
});