Fade in/out ein element in ein div bei mouseover/ - out von div

sorry für den BLÖDEN Titel, ich konnte nicht denken an nichts anderes, und ich bin sorry, wenn das schon jemand gefragt, ich konnte ihn nicht finden.

Sowieso, ich mache eine Galerie mit jQuery. Ich habe ein div und ein Bild und Vorheriges/Nächstes-Tasten im inneren, div. Die Tasten positioniert sind, über das Bild und ich möchte, dass Sie standardmäßig ausgeblendet, zu verblassen, wenn ich bewegen Sie die Maus über das div, und fade-out, wenn ich mich bewege Maus aus dem div. Das problem ist, wenn ich bewegen Sie die Maus aus dem Bild zu einer Schaltfläche, javascript registriert, wie das mouseout-Ereignis, obwohl ich mich gar nicht wirklich verlassen, die div, die hält das Bild und Tasten. Ich machte eine schnelle fiddle, Ihnen zu zeigen, was Los ist: http://jsfiddle.net/7Ppbm/

Hat jemand eine Lösung zu diesem problem? Dank

InformationsquelleAutor tuks | 2012-08-29
  1. 3

    Sollten Sie die hover Funktion:

    $("#button").hide();

$("#container").hover(function(){
    $("#button").fadeIn();
},function(){
    $("#button").fadeOut();
});
    • Wow, das ist es, danke!
    InformationsquelleAutor core1024
  2. 0

    Was du bist fehlt, ist ein timeout, der stall es werden einfach verblassen wieder und wieder.
    Auch auf einer seitlichen Anmerkung, verwenden Sie die .on() die neue auf jQuery 1.7.2

    $("#button").fadeOut();
var timer;

$("#container img").on({
    mouseover: function () {
        clearTimeout(timer);
        $("#button").fadeIn();
    },
    mouseout : function () {
        timer = setTimeout(function () { 
            $("#button").fadeOut();
        }, 100);
    }
});

    jsFiddle aktualisiert

    • Aktualisiert es, einfach nur sehen, dass jetzt
    • Das ist ein workaround, aber zu kompliziert, danke für deine Mühe trotzdem! 🙂
    InformationsquelleAutor Mark Pieszak - Trilon.io
  3. 0

    Warum es nicht mit CSS-übergängen? Unterstützt werden Sie überall außer IE < 10.
    http://caniuse.com/#search=transition

    Deinem Beispiel geändert:
    http://jsfiddle.net/b4e4M/

    • Denn ich fragte mich, wie dies mit JavaScript.
    InformationsquelleAutor piatek
Schreibe einen Kommentar