AJAX読み込み画像にホバー効果を追加する方法はありますか？

Question

AJAX読み込みコンテンツ/画像にホバー効果（アニメーション）を追加することはできますか？現在、このコードを使用していますが、AJAXを使用せずに読み込まれた画像に対してのみ機能します。ところで

$('.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 1

Live EventsまたはDelegates行くための方法です

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

Answer 2

使用.delegateを使用することもできました：

$(".box img").each(function() { 
     $(this).hover(function() { 
      $(this).stop().animate({ opacity: 1.0 }, 500); 
     }, 
     function() { 
      $(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); 
    } 
}); 

あなたはjQueryの.delegate()ではなく.live()を使用して、より良いパフォーマンスを得られますライブ

Answer 4

よりも優れています。

$('.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) 
});