Welcome to WebmasterWorld Guest from 54.196.231.129

Forum Moderators: open

Message Too Old, No Replies

Jquery bounce help

Jquery image bounce effect

     
2:08 am on Dec 20, 2011 (gmt 0)

Junior Member

5+ Year Member

joined:June 23, 2009
posts: 42
votes: 0


wondering if anyone out there can help with this? Im an absolute beginner at Jquery and have a added an animation to make an image slide. I want to make the .cover class also bounce and cant seem to figure out how to add the effect in the code and make it work.

Any help would be greatly appreciated.


Here is my code:
$(document).ready(function(){
//Full Box Sliding (Hidden to Visible)
$('.nub').hover(function(){
$(".cover", this).stop().animate({left:'200px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({left:'250px'},{queue:false,duration:160});
});
});
5:53 pm on Dec 29, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 15, 2002
posts:6807
votes: 0


If I understood your question correctly, you want both the
.nub
and
.cover
to bounce at the same time, triggered by hovering
.nub
?

If so, simply change your code to:

$(document).ready(function() { 
//Full Box Sliding (Hidden to Visible)
$('.nub').hover(function(){
$(this).stop().animate({left:'200px'},{queue:false,duration:160});
$('.cover').stop().animate({left:'200px'},{queue:false,duration:160});
}, function() {
$(this).stop().animate({left:'250px'},{queue:false,duration:160});
$('.cover').stop().animate({left:'250px'},{queue:false,duration:160});
});
});
6:53 pm on Jan 18, 2012 (gmt 0)

Junior Member

5+ Year Member

joined:June 23, 2009
posts: 42
votes: 0


Thanks for the reply. Do I need to install the easeing folder to my server to make this work. All Im getting is a choppy animation when I do this.
Thanks