jquery - 使用 Jquery 实现鼠标悬停效果和队列

Question

在过去的几个小时里，我一直在寻找如何做到这一点 - 在任何地方都找不到。

我有几个按钮（div）。它由一个 div 中的一个 div 组成。父 div 具有正常的按钮背景图像，子 div 具有较亮的发光背景图像。在鼠标悬停时，我希望子 div 的不透明度为 1.0，然后淡出到 0.2（所以它看起来像一个闪光灯）。在 MouseOut 上，它只需要回到 0.0。显然我不希望 MouseOver/MouseOut 队列堆积。

我查看了队列效果，但我不知道如何让它与 MouseOver 按钮一起使用。另外，我很讨厌 JS。

Answer 1

您应该使用 mouseenter 和 mouseleave。当光标在元素内移动时，mouseover 和 mouseout 事件会连续触发。

$(".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

你看过 fadeTo 方法吗？ http://jquery.bassistance.de/api-browser/#fadeToStringNumberNumberFunction

它应该是这样的（虽然没有测试过）

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

Answer 3

问题是悬停也有一个功能，我想我很困惑......

处理名为 ButtonBGanim 的 div：

$(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

未经测试，但应该非常接近。

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