Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript I must be close…jQuery bounce(); effect???

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #185948
    Steven Watson
    Participant

    Hi guys

    I have just completed the jQuery course on Codecademy and I want to use a jQuery powered feature on my personal website.

    My goal is:

    When hovering over the arrow image, I want it to give the effect of bouncing, then when you move the mouse away…it stops.

    I feel like I am close, but I am not sure…please help!

    http://codepen.io/Watson90/pen/LCyaG

    #185965
    Senff
    Participant

    Indeed, close. Looks like the syntax of the bounce function is a little off. Try this:

    $(this).toggle( "bounce", { times: 3 },'fast');
    

    Note though, a bouncing element will become a block level, which is why it will move when it’s actually bouncing. So, better to make the image a block level element anyway, and it won’t move when bouncing.

    That should get you a little further.

    #185968
    Steven Watson
    Participant

    Yes!

    Thanks @Senff

    I cleaned up my HTML a little bit by wrapping it into a div and instead of using .toggle in my JS I used .effect.

    http://codepen.io/Watson90/pen/LCyaG

    Am I right in thinking that there is a .bounce(); feature in jQuery UI?

    Thanks man

    #185970
    Senff
    Participant

    I don’t think so, I just checked this page for its syntax: http://api.jqueryui.com/bounce-effect/

    You can create it yourself, of course.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.