Question

I got this code from StackOverflow:

$(document).ready(function() {
    $(function(){
        $('img').load(function() {
            $(this).data('height', this.height);
        }).bind('mouseenter mouseleave', function(e) {
            $(this).stop().animate({
                height: $(this).data('height') * 
                        (e.type === 'mouseenter' ? 1.5 : 1)
            });
        });
    });
});

It works in IE, Chrome, Firefox and Opera. But in Opera it only works when I first enter the page (if I type in the link in the adress bar).
I have a 4 page site and when I go to the Jquery page from an other page it doesn’t zoom the pics on mouseover.

Answer 1

Use the .each method instead of .load:

$(function(){
    $('img').each(function() {
        $(this).data('height', this.height);
    }).on('mouseenter mouseleave', function(e) {
        $(this).stop().animate({
            height: $(this).data('height') * (e.type === 'mouseenter' ? 1.5 : 1)
        });
    });
});

---

Demo

BTW: $(document).ready(function() { is equal to $(function() {.