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

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

играть на скрипке

Answer 2

Вы должны явно проверить 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 3

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

В 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 4

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