Jquery проблема с FadeTo при наведении

Question

Так что, в основном, я пытаюсь заставить div.show постепенно исчезать при наведении, а затем, когда вы прекращаете зависать, заставить его исчезать до непрозрачности 0.

Однако я не могу заставить div исчезать до 0, когда вы прекращаете зависать.

Вот мой код:

$(document).ready(function(){
    $("div.post.photo").live('hover', function() {
        $(this).children("div.show").fadeTo("slow", .7);
    }, function(){
        $(this).children("div.show").fadeTo("slow", 0);
    });
});

Спасибо

Answer 1

Вам необходимо явно проверить события mouseenter и mouseleave, используя event.type. Вам не нужно связывать их дважды.

$(document).ready(function(){
    $("div.post.photo").live('hover', function(event) {

        if( event.type === 'mouseenter') 
            $(this).children("div.show").fadeTo("slow", .7);
        else if( event.type === 'mouseleave' )
            $(this).children("div.show").fadeTo("slow", 0);
    });
});

Вот скрипка . Лично я бы использовал .on, но я не уверен, какую версию jQuery вы используете.

Answer 2

Я считаю, что это работает, если вы используете .hover() вместо .live(), поэтому я думаю, что проблема в том, что .live() не поддерживает событие hover, возможно, потому что .live() имеет только одну функцию-обработчик, а неtwo.

В jQuery 1.7+ это, похоже, работает (разбивая его на два обработчика событий и модернизируя до .on()):

$(document).ready(function(){
    $(document.body).on("mouseenter", "div.post.photo",
        function() {
            $(this).children("div.show").fadeTo("slow", .7);
        }
    );

    $(document.body).on("mouseleave", "div.post.photo",
        function() {
            $(this).children("div.show").fadeTo("slow", .0);
        }
    );
});

Вы можете увидеть, как оно работает здесь: http://jsfiddle.net/jfriend00/YV2nU/.

К вашему сведению, я перешел на .on(), потому что .live() устарела в jQuery 1.7 +.

Answer 3

Я почти уверен, что вы должны уменьшить его до 1, а не 0. Кроме того, live() принимает только один обработчик.Вам нужно добавить событие мыши отдельно.

fiddle

Answer 4

Ваша проблема в том, что hover не является событием Javascript, это сокращение от JQuery для событий mouseenter и mouseleave, поэтому его нельзя использовать в таком методе live.Вы должны связать их отдельно.Кроме того, следует помнить, что метод .live() устарел.Документация JQuery содержит инструкции о том, какие методы лучше использовать.