jQuery悬停函数

您好，我正在尝试创建一个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
        });
    }
}

));

这里还有一个例子：

---

有人能给我一些关于如何让这段代码工作的指导吗？

除了hover方法使用的错误语法之外（它使用两个函数作为参数） 你需要使用这个方法

---

更新了示例

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

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

除了这两个函数外，在hover（）中不能有任何over代码，因此在您的示例中

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

正在导致错误。我建议你进一步阅读

试试这个：

---

为什么不试试像这样的东西呢

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

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

---

在你的悬停功能里面。看看文档--您传递了两个函数，一个是“onmouseover”，另一个是“onmouseout”。

代码中有几个错误：

您忘记了事件处理程序代码周围的函数包装

变量

ind

仅在第一个函数中定义，您还需要在第二个函数中定义它

在第二个函数中有一个

span

选择器，用于防止if查找任何元素

工作代码：

:

编辑：

---

在jQuery中添加了

.stop（true，true）

和

500

ms以消除无限排队。

您的JavaScript语法不正确：未捕获的语法错误：意外的标记变量：以下是一个更正的版本：但是，如果元素是透明的，则似乎不会引发鼠标事件，所以我想知道在另一个div被隐藏后，您想如何显示它们。啊，谢谢，我想知道jquery中是否有这样的函数。不，他不需要使用

not

方法，做同一件事有很多不同的方法。@Gaby-hmm不，我不知道是否应该在新问题中提到这一点，但如果我将鼠标移到另一个div，所有其他div在再次消失之前都会闪现在视图中。我理解这正是函数的工作方式，因为在mouseout事件中。有没有一个平滑的方法可以让其他演员不闪烁？@Guffa，是的，当然还有其他方法。。这是我能建议tat按照OP的要求做的最简单的翻译。@Ima，更新的答案。我现在也在使用该方法停止当前动画。否则，它们会排队，闪烁也会出现。（还添加了更新的JSFIDLE）+1哦，哇，这真聪明。我从没想过要这么做。天才认为这样做可以消除其他答案使用的一些不必要的重新jQuery-ifying（如果这是一个词，lol）。我发现将jQuery的项存储在变量中，然后使用这些变量，性能会更好。

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

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

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

$("#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 });
      }
    });
  }
);

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);

        }

    });

});