11548 sujets

JavaScript, DOM et API Web HTML5

Probleme jquery clignote

Hello
j'ai un effet de fade sur des images de fond et lorsqu'on passe sa souris sur le sous menu ca fait une transition fade entre 2 visuels
Je ne cromprend pas cependant pourquoi mes images clignottes
http://www.sllov.com/sllov_mobilier_design_collection.php
Effet sur menu beige

$(".oopic").bind("mouseover",function(){
	
	
	//1er clic sur le menu
  if($('.llx').attr("id") == undefined){
   	$('#contentsubbox').animate({marginTop: "50",opacity: '0'}, 800, function() {$('#contentsubbox').hide()});
    $('#mpic'+currid).fadeIn(900);
    $('#mpic'+$(this).attr("id")).addClass("llx");
  }
  else{
   var curridT = $('.llx').attr("id");
   var currid = $(this).attr("id");
   if(curridT != currid) {
    
    $('.llx').fadeOut(900).delay(800);  
    $('#mpic'+curridT).removeClass("llx");
    $('#mpic'+currid).fadeIn(900);
    $('#mpic'+$(this).attr("id")).addClass("llx");
  }
  }
 
		$('#texticon').fadeIn(800);
    
  });
Salutation

Dans mon cas il ne s'agit pas de clignotement seulement mais aussi d'une hésitation entre l'image du menu précédent et le menu appelant. Comme si ton programme cherchait à savoir quelle image charger.

D'ailleur ce n'est pas le seul bug : tu en a un aussi sur le choix d'afficher le texte de présentation. Celui-ci réagit mal au pointeur - ouverture et fermeture à partir de l'icone.

De plus sur IE une erreur javascript est détecté sur le fichier jquery.min.js :

1 ) à la ligne 18
2 ) caractère 20094.

Il s'agirait de la valeur d'une propriété non valide.

Je n'ai vérifier qu'avec IE8

..


$(".oopic").bind("mouseover",function(){
	
		$idp = $(this).attr("id");
	  	$curridT = $('.llx').attr("id");
   		$currid = 'mpic'+$idp;
	   	startanim = function() {
		    $('#mpic'+$idp).addClass("llx");
            $('#mpic'+$idp).fadeIn(900);
        	$('#contentsubbox').animate({marginTop: "50",opacity: '0'}, 800);
    		$('#texticon').fadeIn(800);
    	}	
		 
	    //First statement ->> we hide the box and load the associated bg
		if($('.llx').attr("id") == undefined){startanim();}
	
	    else {
	    	
			$.when(startanim()).done(function() {
   		
			
	    	     
			
					startsub = function() {
  			 			$('.llx').fadeOut(900);
    					$('#'+$curridT).removeClass("llx");
					}
			
					if($curridT  != $currid){
						startsub();
						
						$('#'+$currid).delay(800).fadeIn(900);
    					$('#'+$currid).addClass("llx");
					
						
					}
				});
		}
 });


BOn j'ai essayé d'optimiser le code en lui disant

Si aucune image loadée, faire disparaitre box, loader une image, lui mettre une classe llx
Si il y a une image avec la class llx et que la premiere animation est ok, alors fadout l'image classe llx, suppression de la classe
Si cette action est faite loader la nouvelle image et lui attribuer une classe... je ne vois pas ou je me suis planté

La je croi que j'ai bien associée l' id du menu et l'image a chargé j'ai checké avec des alert
J'ai corrigé mon histoire de pointeur
j'ai mon menu de la forme
<li id="m'.$Qquery2['id_category'].'" class="oopic"></div>


et mes images de la forme
<div id="mpicm'.$Qquery2['id_category'].'" style="display:none"></div>
ah je crois que c'est dans mon premier if / else que ca bug, le fait que ca clignotte ou affiche

if($('.llx').attr("id") == undefined){startanim();} else {}
en fait il fait les 2 anim a chaque fois
Modifié par ubik174 (02 Jul 2011 - 08:34)
ah je crois que c'est dans mon premier if / else que ca bug, le fait que ca clignotte ou affiche

if($('.llx').attr("id") == undefined){startanim();} else {}
en fait il fait les 2 anim a chaque fois
Modifié par ubik174 (02 Jul 2011 - 08:34)
Sujet clos
Aller à