使用 Jquery 实现鼠标悬停效果和队列答案

【问题标题】：Using Jquery for mouseover effect and queue使用 Jquery 实现鼠标悬停效果和队列
【发布时间】：2010-12-24 13:39:20
【问题描述】：

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

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

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

【问题讨论】：

标签： jquery queue effects mouseover

【解决方案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);
    });

【讨论】：

嗯无法让它工作？父母的名字是 ButtonBG 孩子是 ButtonBGanim，所以我但是你的 .button 所在的#ButtonBG...不行。
会发生什么？错误？您是否安装了 firebug 或任何 javascript 调试器？

【解决方案2】：

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

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

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

【讨论】：

关键是要把第2个fade放到第1个的回调中。

【解决方案3】：

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

寻址名为 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)
});

【讨论】：

【解决方案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);
      }
    );

【讨论】：