fonctions jQuery de comportement inattendu

Question

Je viens de commencer à apprendre jQuery et je face à un comportement étrange de ce code:

$(document).ready(function() { 
    $("img").hover(function() { 
     $(this).toggle("explode"); 
    }); 
}); 

HTML

<div id="head" > 
    <div id="flag2" class="flag" ><img src="img/flag2.png"/></div> 
    <div id="nickwrapper"> 
     <p id="nick">Text</p> 
     <p id="undernick">Some text</p> 
    </div> 
    <div id="flag" class="flag" ><img src="img/flag.png"/></div> 
</div> 

au lieu d'exploser l'image disparaît en devenant plus petit .. .. mais quand je change $ ("img") sur la classe $ (". Flag") qui est assignée à mes images, le comportement de changement d'image .. il se déplace à droite et apparaît à l'autre niveau .. pas comme quand il était $ ("img"). Pourquoi est-ce le cas? Je veux juste que les images de la classe spécifique explosent ..

Answer 1

La classe ".flag" est assignée à l'emballage DIV et non l'img lui-même. Donc, essentiellement avec IMG vous exploser l'image. Et avec .flag vous exploser la DIV autour d'elle. Vous pouvez placer l'indicateur de classe sur l'étiquette img elle-même.

Answer 2

Je ne suis pas 100% Je comprends ce que vous demandez, mais il semble que vous ayez plus de problèmes avec le css qu'avec vos sélecteurs JQuery.

Je voudrais essayer quelque chose comme ceci:

$(document).ready(function() { 
     $("img").hover(function() { 
      console.log("Hovered over image"); 
     }); 

     setTimeout(function(){ 
      $(someImageID).toggle("explode"); 
     }, 1000); 
    }); 

Ce code sera imprimé dans le journal de la console chaque fois que vous passez la souris sur une image, puis séparément va exploser une seule image après avoir attendu 1000ms. Cela vous aidera à: a) confirmer que vous avez bien sélectionné vos sélecteurs, et b) vous assurer que l'explosion fonctionne comme vous le souhaitez. Une fois que vous savez que ces deux choses fonctionnent, vous pouvez les combiner.

EDIT: Je viens de voir que vous avez mis à jour le post pour inclure votre code HTML. L'autre réponse est correcte sur les problèmes que vous rencontrez avec les classes.

Answer 3

Vous utilisez bascule, vous devriez utiliser toggleClass

http://api.jquery.com/toggleclass/