Toutes les clefs pour réussir dans le e-commerce

Mes modules Prestashop

Afficher et masquer des éléments avec jquery

Voici une petite fonction qui va vous permettre d’afficher un élément en particulier dans un groupe et de masquer tous les autres.


lastShowId=false;
showMeAndHideOtherFadeIn=false;
showMeAndHideOtherFadeOut=false;
function showMeAndHideOther(showId,hideClass,fadeInSpeed,fadeOutSpeed) {
	if(showMeAndHideOtherFadeIn) 
		showMeAndHideOtherFadeIn.stop();	
	if(showMeAndHideOtherFadeOut) 
		showMeAndHideOtherFadeOut.stop();
	if(lastShowId==showId)
		return false;
	$("."+hideClass).each(function() {	
		if($(this).is(':visible')) {
			showMeAndHideOtherFadeOut=$(this).fadeOut(fadeOutSpeed,function() {
				showMeAndHideOtherFadeIn=$('#'+showId).fadeIn(fadeInSpeed,function() {
					showMeAndHideOtherFadeIn=false;
				});				
				showMeAndHideOtherFadeOut=false
				lastShowId=showId;
			});
		}
	})
}

Il faut ensuite avoir une série d’éléments ayant chacun leur ID et une classe commune.
Par exemple:


<img src="monimage1" alt="" class="displayMe" id="img1"/>
<img src="monimage2" alt="" class="displayMe" id="img2"/>
<img src="monimage3" alt="" class="displayMe" id="img3"/>
<img src="monimage4" alt="" class="displayMe" id="img4"/>

Il suffit d’appeler la fonction comme ceci pour afficher l’image 1 et masquer les autres.


showMeAndHideOther('img1','displayMe',300,400);

Poster un Commentaire

Soyez le premier à commenter !

Recevoir un email pour
avatar
wpDiscuz