jQuery Hide/Show mit Folie auf zu Schweben... besseren Weg, dies zu tun?
Grundsätzlich einige Probleme mit der Verwendung von Hover anzeigen oder ausblenden eines Elements.
Die Idee ist einfach, auf hover-show a div. Wenn Sie nicht mehr schweben, Sie auszublenden. Problem ist, wenn der Mauszeiger über dem div und Blätter zu schnell, das anzeigen/ausblenden von div-Element sichtbar bleibt. Ich hoffe, dies ist etwas, was leicht zu beheben ist und nicht ein typisches problem mit dem hover-Ereignis.
jQuery
(
function()
{
jQuery(".slideDiv").hide();
jQuery(".mainDiv").hover
(
function()
{
var children = jQuery(this).children(".slideDiv");
if (children.is(":hidden"))
{
children.show("slide", { direction: "left" }, 100);
}
},
function()
{
var children = jQuery(this).children(".slideDiv");
children.hide("slide", { direction: "left" }, 100);
}
);
}
);
Stile Aussehen:
.mainDiv
{
margin:5px;
height:200px;
}
.slideDiv
{
background-color:Teal;
float:left;
height:200px;
position:absolute;
z-index:100;
}
- Und markup
<div class="mainDiv">
<div class="showDiv">
Hover me
</div>
<div class="slideDiv">
Do you see me?
</div>
</div>
<div class="clear"></div>
<div class="mainDiv">
<div class="showDiv">
Hover me too
</div>
<div class="slideDiv">
Do you see me now?
</div>
</div>
InformationsquelleAutor Programmin Tool | 2009-07-09
Du musst angemeldet sein, um einen Kommentar abzugeben.
Verwenden Sie die hoverIntent plugin. Dies vermeidet alles, was gezeigt wird, wenn der Benutzer einfach geht mit der Maus über die Elemente und vermeidet unschönen Kette von Animationen.
+1 für das aussetzen mich auf das hoverIntent-plugin, dies ist der Grund, warum ich hierher kommen, und navigieren Sie rund um das jQuery-threads.. ich pick-up so viele Coole tricks.
Das sieht toll aus, werde ich dieses plugin verwenden!
InformationsquelleAutor redsquare
Habe ich versucht dein Skript und es hat wie du Sie beschrieben hast. Ich habe versucht, das entfernen der Kinder.is(":hidden") aus dem Skript, aber das problem immer noch aufgetreten ist.
Als ich schrieb er das Skript das div nie sichtbar bleibt. So, es scheint, dass das problem ist mit der Verwendung von jQuery Kinder statt finden zu bekommen, um das Objekt:
Immer noch Probleme hat:
Funktioniert wie vorgesehen:
Und ja, Das hoverIntent-plugin ist nice 😛
InformationsquelleAutor Mottie