Функция наведения 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() ^{документы} метод

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

В вашем коде есть несколько ошибок:

1. Вы забыли обертки функций вокруг кода для обработчиков событий.
2. Переменная ind определяется только в первой функции, вам нужно определить ее и во второй.
3. Во второй функции у вас есть селектор 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 3

попробуйте это: скрипка

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

Answer 4

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) и 500 мс в jQuery для устранения бесконечной очереди.

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

Вы неправильно используете функцию наведения. Вы передаете в hover две функции: первая - для ввода мышью, а вторая - для мыши. Функция наведения работает примерно так:

$("#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 () в Документах jQuery