I am trying to animate top menus with jQuery for this website http://www.homeprideflour.co.uk/index.htm
I am not been able to animate products and collectiables menu image hover animation. I am using hover images as background and changing their position with Jquery. Here is my code
$('.liproduct a').mouseover(function(){
$('.prodimg').stop().animate(
{backgroundPosition:"(50% 0px)"},
{duration:600})
})
.mouseout(function(){
$('.prodimg').stop().animate(
{backgroundPosition:"(50% 100px)"},
{duration:600})
})
Can anyone suggest me how to achieve the mouseover effect same as product menu in above mentioned URL.
Thanks
I haven't tested this but ths is how I would approach:
var $prodImg = $('.prodimg');
$('.liproduct a').on("hover",function(){
$prodImg.stop().animate(
{backgroundPosition:"(50% 0px)"},
{duration:600})
},
function(){
$prodImg.stop().animate(
{backgroundPosition:"(50% 100px)"},
{duration:600})
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.