Question

Is it possible to add a hover effect (animation) to AJAX loaded content/images? Currently I’m using this code to do it, but it only works for the images that are loaded without 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 or Delegates are the way to go:

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

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

By the way, in your original code there was no need to use each – you could have used $('.box img').hover(...)