Question

I am trying to create hover effect with callback function. It seems that the effect can only be trigged on the callback function but not the init hover. I was wondering if someone here can help me out. Thanks a lot.

$("img").live("hover", function () {
    // hover in
    $(this).css("z-index", 1);
    $(this).animate({
        height: "35%",
        width: "35%",
        left: "-=50",
        top: "-=50"
    }, "fast");
}, function () { //only the following codes will be triggered.
    // hover out
    $(this).css("z-index", 0);
    $(this).animate({
        height: "15%",
        width: "15%",
        left: "+=50",
        top: "+=50"
    }, "fast");
});

The img are generated via ajax call, not sure if it’s relevant

<div id='image_layout'>
    <img src='a.jpg' />
    <img src='b.jpg' />
    <img src='c.jpg' />
</div>  

Answer 1

live() is deprecated, and it does’nt really work that way, but if you are using jQuery 1.7+ you should be using on() to delegate the event to the closest non dynamic parent, I’ll use document in the example, you’ll replace document with the closest parent to the image that is’nt inserted with Ajax, probably #image_layout if that element is not inserted dynamically :

$(document).on({
    mouseenter: function() {
        $(this).css("z-index", 1).animate({
                height: "35%",
                width: "35%",
                left: "-=50",
                top: "-=50"
            }, "fast");
    },
    mouseleave: function() {
        $(this).css("z-index", 0).animate({
                height: "15%",
                width: "15%",
                left: "+=50",
                top: "+=50"
            }, "fast");
    }
}, "img");

On another note, using += and percentages in your animations will in many cases cause you nothing but grief.