En utilisant Jquery pour effet de file d'attente et mouseover

Question

Je l'ai regardé autour pour les dernières deux heures sur la façon de le faire -. Ne trouve nulle part

J'ai plusieurs boutons (divs). Il se compose d'un div dans un div. Le div parent a l'image d'arrière-plan de bouton normal, l'enfant a une image d'arrière-plan plus léger glowy. Sur Mouseover, je veux l'enfant div d'aller à une opacité de 1,0, puis fondu à 0,2 (il ressemble à un flash). Sur MouseOut, il a juste besoin de revenir à 0,0. Il est évident que je ne veux pas l'accumulation de file d'attente MouseOver / MouseOut.

Je regardais les effets de file d'attente, mais je ne peux pas comprendre comment obtenir que cela fonctionne avec un bouton MouseOver. De plus, je suce à JS.

Answer 1

Vous devez utiliser mouseenter et mouseleave. Les événements mouseover et mouseout feu continu en tant que le curseur est déplacé à l'intérieur d'un élément.

$(".button")
    .mouseenter(function() {
        var overlay = $("div:first",this).fadeTo(350, 1.0, function() {
            overlay.fadeTo(350, 0.2);
        });
    })
    .mouseleave(function() {
        $("div:first", this).stop().fadeOut(350);
    });

Answer 2

Avez-vous un coup d'oeil à la méthode fadeTo? http://jquery.bassistance.de/api-browser/#fadeToStringNumberNumberFunction

Il devrait être quelque chose comme ça (ne l'ont pas testé, cependant)

var childdiv = $("#childdiv");
childdiv .fadeTo(500, 1.0, function(){ 
  childdiv .fadeTo(500, 0.2);
});

Answer 3

Le problème est Hover a une fonction aussi bien, et je pense que je suis confus ... se

adresse div appelé ButtonBGanim:

$(document).ready(function(){

var buttonbg = $("#ButtonBGanim");

$(buttonbg).hover(
function() {
$(this).stop().fadeTo(500, 1.0, function(){ 
  buttonbg .fadeTo(500, 0.2);
},
function() {
$(this).stop().fadeTo(500, 0.0)
});

Answer 4

non testé, mais devrait être assez proche.

$("#id").hover(
      function () {
    $(this).stop().children("div").fadeTo("fast", 1.0).fadeTo("slow", 0.2);
      }, 
      function () {
        $(this).stop().children("div").fadeTo("slow", 0.0);
      }
    );