Search code examples
jqueryhoverjquery-hover

jQuery 1.7 - hover won't work


I have a code, a simple hover effect, working fine in jQuery 1.4 but not working in jQuery 1.7

Here is the code:

jQuery(document).ready(function() {
    /* When a thumbnail is hovered over do shine */
    $('.large_thumb').hover(function() {
        $(this).find(".large_thumb_shine").css("background-position", "-167px 0");
        $(this).find(".large_thumb_shine").stop().animate({
            backgroundPosition: '167px 0'
        }, 600);
    }, function() {
        $(this).find(".large_thumb_shine").stop().animate({
            backgroundPosition: '167px 0'
        }, 600);
    });
});​

What it should do:

move a transparent shine-like PNG over content manipulating bg-position on onmouseover. The effect shouldn't be repeated on onmouseout thus the second function.

For some reason this super basic code won't work in the latest jQuery 1.7 but still works in 1.4.

I've read documentation and seem to use the right method, hover. where seems to be the problem in my code?

edit:

jsfiddle

http://jsfiddle.net/3QRGD/


Solution

  • You can try using the jQuery Animate step function with a "useless" CSS property (i.e. border-spacing, something you'll probably never use that doesn't affect the layout):

    Demo: http://jsfiddle.net/SO_AMK/tTddS/

    jQuery:

    jQuery(document).ready(function() {
    
        /* When a thumbnail is hovered over do shine */
        $('.large_thumb').hover(function() {
            var shine = $(this).find(".large_thumb_shine");
    
            $(shine).css("background-position", "-167px 0");
            $(shine).stop().animate({
                "border-spacing": -167
            }, {
                step: function(now, fx) {
                    $(shine).css("background-position", now + "px 0px");
                },
                duration: 600
            });
    
    
    
        }, function() {
            var shine = $(this).find(".large_thumb_shine");
    
            $(shine).stop().animate({
                "border-spacing": -167
            }, {
                step: function(now, fx) {
                    $(shine).css("background-position", now + "px 0px");
                },
                duration: 600
            });
        });
    });​