Question

是否可以为加载AJAX的内容/图像添加悬停效果（动画）？目前我正在使用此代码来执行此操作，但它仅适用于没有AJAX加载的图像。

    $(".box img").each(function() {
        $(this).hover(function() {
            $(this).stop().animate({ opacity: 1.0 }, 500);
        },
        function() {
            $(this).stop().animate({ opacity: 0.3 }, 500);
        });
    });

Answer 1

Live Events或Delegates是要走的路：

$('.box').delegate('img', {
    mouseenter: function() {
        $(this).stop().animate({ opacity: 1.0 }, 500);

    },
    mouseleave: function() {
        $(this).stop().animate({ opacity: 0.3 }, 500);
    }
});

顺便说一下，在原始代码中无需使用each - 您可以使用$('.box img').hover(...)

Answer 2

使用.delegate

$('.box').delegate('img', {
    mouseover: function (e) {
        $(this).stop().animate({ opacity: 1.0 }, 500);
    },
    mouseout: function (e) {
        $(this).stop().animate({ opacity: 0.3 }, 500);
    }
});

Answer 3

$('.box').delegate('img', {
    mouseenter: function() {
        $(this).stop().animate({ opacity: 1.0 }, 500);

    },
    mouseleave: function() {
        $(this).stop().animate({ opacity: 0.3 }, 500);
    }
});

比活着好

Answer 4

使用jQuery的.delegate()而非.live()，您将获得更好的效果。

$('.box').delegate('img','hover', function( event ) {
    if( event.type === 'mouseenter' )  
        $(this).stop().animate({ opacity: 1.0 }, 500);
    else
        $(this).stop().animate({ opacity: 0.3 }, 500)
});

有没有办法可以为加载AJAX的图像添加悬停效果？

4 个答案: