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

您的代码中存在多个错误：

您已经忘记了事件处理程序代码周围的函数包装器。
变量ind仅在第一个函数中定义，您还需要在第二个函数中定义它。
第二个函数中有一个span选择器，用于保存，如果找不到任何元素。

工作代码：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();

导致错误。我建议你在hover() on the jQuery Docs

上进一步阅读

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

        }

    });

});

修改

在jQuery中添加.stop(true,true)和500 ms以消除无限排队。

jQuery悬停功能

6 个答案: