jQuery 悬停功能

Question

您好，我正在尝试创建一个 jquery 函数，当单击其中一个 div 时，该函数会淡出所有其他 div。我的代码无法正常工作，我不知道如何正确编写它。这是我到目前为止所拥有的：

$("#slider div.popup").hover(
var ind = $(this).index();

$("#slider div.popup").each(function() {
    if ($(this).index() != ind) {
        //fades all other .popup divs
        $(this).animate({
            opacity: 0
        });
    }
}), $("#slider div.popup").each(function() {
    if ($(this).index() != ind) {
        //unfades all other .popup divs
        $('span', this).animate({
            opacity: 1
        });
    }
}

));

这里还有一个示例：http://jsfiddle. net/7j3mk/

有人可以指导我如何让这段代码工作吗？

Answer 1

除了您在悬停方法中使用的错误语法之外（它需要两个函数作为参数）
您需要使用 .not() ^docs 方法

$("#slider div.popup").hover( function(){
    $("#slider div.popup").not(this).stop().animate({
            opacity: 0
        });
}, function(){
    $("#slider div.popup").not(this).stop().animate({
            opacity: 1
        });
});

更新示例位于http://jsfiddle.net/gaby/7j3mk/ 11/

Answer 2

试试这个： fiddle

$("#slider div.popup").hover(function(){
    $('.popup').animate({
            opacity: 0
        });
    $(this).animate({
            opacity: 1
        });
},function(){
    $('.popup').animate({
            opacity: 1
        });
})

Answer 3

您的代码中有几个错误：

1. 您忘记了事件处理程序代码周围的函数包装器。
2. 变量 ind 仅在第一个函数中定义，您也需要在第二个函数中定义它。
3. 第二个函数中有一个 span 选择器，可以防止 if 查找任何元素。

工作代码： http://jsfiddle.net/7j3mk/7/

$("#slider div.popup").hover(
  function() {
    var ind = $(this).index();
    $("#slider div.popup").each(function() {
      if ($(this).index() != ind) {
        //fades all other .popup divs
        $(this).animate({ opacity: 0 });
      }
    });
  }, function() {
    var ind = $(this).index();
    $("#slider div.popup").each(function() {
      if ($(this).index() != ind) {
        //unfades all other .popup divs
        $(this).animate({ opacity: 1 });
      }
    });
  }
);

Answer 4

您使用悬停功能是错误的。您向悬停传递两个函数，第一个用于鼠标进入，第二个用于鼠标退出。悬停函数的工作原理如下：

$("#slider div.popup").hover(
    function() {
        //this is run when the mouse hovers over
    },
    function () {
        //this is run when the mouse leaves
    }
);

除了这两个函数之外，hover() 内不能有任何过度代码，因此在您的示例中，该行

var ind = $(this).index();

导致了错误。我建议您进一步阅读 jQuery 文档上的 hover()

Answer 5

为什么不尝试像

$(this).addClass("hover");

$("#slider div.popup:not(.hover)").each(function(){
    $(this).animate({
        opacity:0   
    });
})

在悬停功能内一样。看一下文档 - http://api.jquery.com/hover/ - 你通过2 个函数 - 一个要执行“onmouseover”，另一个要执行“onmouseout”。

Answer 6

http://jsfiddle.net/RL6s8/：

var $sliderDivs = $("#slider div.popup");

$sliderDivs.hover(function() {

    var hoveredIndex = $(this).index();
    $sliderDivs.each(function() {

        var $this = $(this);
        if ($this.index() !== hoveredIndex) {

            //fades all other .popup divs
            $this.animate.stop(true,true).({ opacity: 0 }, 500);

        }

    });

}, function() {

    var hoveredIndex = $(this).index();
    $sliderDivs.each(function() {

        var $this = $(this);
        if ($this.index() !== hoveredIndex) {

            //unfades all other .popup divs
            $this.animate.stop(true,true).({ opacity: 1 }, 500);

        }

    });

});

编辑：

添加.stop(true,true) 和 jQuery 的 500ms 来消除无限排队。