renversements Compagnons,Essayer de prévenir jQuery mouseOut fadeOut() sur div assis sur le dessus d'une image - contenu chargé via ajax
Je suis en train d'empêcher une div de la décoloration et à disparaître quand il est pas censé .
Cette div est située en haut d'une image. L'image possède une fonction mouseover et mouseout qui fait apparaître et disparaître la div lorsque l'utilisateur passe d'une image à l'autre.
Je dois souligner que la div et tout le HTML qui l'entoure est créé dynamiquement, donc je dois utiliser le gestionnaire d'événements .live.
Le problème vient quand on roule sur le div lui-même. Parce que c'est techniquement un événement mouseout du point de vue de l'image, le div disparaît, même si je veux qu'il reste présent car l'utilisateur n'a pas vraiment roulé sur une image différente, juste un élément différent qui se trouve au sommet de la image.
Voici un lien pointant vers ce que je travaille à ce jour: http://chereecheree.com/dagworthy/design.html
Notez que lorsque vous roulez sur une image, une boîte d'information apparaît (div) mais rouler sur ce div rend fade out, créer un effet clignotant désagréable.
Voici le code qui traite de ce comportement:
(je suis en train de tester où le roulement est arrivé dernier, mais il a été difficile)
<head>
<script>
var curDockItem, lastDockItem, lastDockItemElement, curDockItemElement;
$("#design ").live("mouseover", function(e){
var parentNode = e.target.parentNode;
var infoBoxes = $(parentNode).find("div");
curDockItemElement = e.target.nodeName;
$(infoBoxes).each(function(){
$(this).fadeIn("slow");
lastDockItem = infoBoxes;
});
});
$("#design").live("mouseout", function(e){
var parentNode = e.target.parentNode;
var infoBoxes = $(parentNode).find("div");
$(infoBoxes).each(function(){
if (curDockItemElement == 'IMG') {
//alert (lastDockItem[0]);
$(lastDockItem).each(function(){
$(this).fadeOut("slow");
});
}
});
});
</script>
</head>
div id="design">
<span id="Romper">
<image />
<div class="boxItemInfo" style="margin-left:50px; margin-top:-180px;" >
<h1>Cable-Knit<br>Alpaca Romper</h1>
</div>
</span>
<span id="RedShorts">
<image />
<div class="boxItemInfo" style="margin-left:150px; margin-top:-220px;" >
<h1>Cashmere<br>Knit Shorts</h1>
</div>
</span>
<span id="StripeShorts">
<image />
<div class="boxItemInfo" style="margin-left:100px; margin-top:-220px;" >
<h1>Merino/Mohair/Silk<br>Knit Shorts</h1>
</div>
</span>
<span id="CheckerBow">
<image />
<div class="boxItemInfo" style="margin-left:75px; margin-top:-265px;" >
<h1>Cashmere/Silk<br>Checkered Sweater </h1>
</div>
</span>
</div>
Cela vous aidera si vous utilisez le bouton qui ressemble à un tas de texte binaire pour auto-indenter votre code afin qu'il soit lisible. Merci :) – Josiah
Je suis encore en train de l'éditer. Désolé, encore apprendre les ficelles du métier. –
Merci, je ne l'avais pas vu auparavant. C'est pratique! –