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
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
});
});
});