Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Oct 2006
    Posts
    82
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Trying to get an image to bounce up and down on the spot

    Hi guys,

    All I want to do is get an image to bounce up and down on the spot slowly, almost as if it's hovering as opposed to bouncing, but I'm struggling.

    This is what I have so far, but for some reason the image goes off screen once it's stopped bouncing: http://jsfiddle.net/WZumy/135/

    Any help much appreciated.

    Thanks

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,583
    Thanks
    78
    Thanked 4,385 Times in 4,350 Posts
    It doesn't go off the screen with Chrome. On the other hand, you can't click on it twice and make it bounce again.

    In any case, this is clearly exclusively a jQuery question and should be in the jQuery forum. It may well be a bug or quirk in the jQuery library, esp. since it seems to act differently in different browsers.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    Doesn't go off the screen in FF either (and IE isn't loading jsfiddle, so who knows)

    You can click it twice but littlejones has it set to 100 bounces, so it looks like the animation runs for long after it appears to te naked eye that it has stopped. If you change times to 7 you get the same effect and can get it to run again after it has stopped moving.

  • #4
    New Coder
    Join Date
    Oct 2006
    Posts
    82
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi guys,

    Thanks for the responses, and sorry if this is in the wrong forum, I couldn't see a specific jquery section anywhere so my bad.

    Going back to what I'm trying to achieve, does anyone have any ideas on what code I could use to give a floating/bouncing on the spot effect that will work in all browsers? I don't want it to be activated on click either, I want it to start as soon as the page loads.

    Thanks in advance,

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    the answer to your second question would be to activate it with the window load event, instead of the click:

    Code:
    $(window).load(function(){
        $('.bounce').effect("bounce", { 
    		times:7,
    		distance:50
    		}, 8000);
    });
    (note that the 8000 controls the speed of the animation - the higher the number the slower it goes)

    as to the cross-browser thing, it's got me stumped. I don't see the behaviour you describe in FF, IE, Chrome, Safari or Opera. Which browser are you using?

  • #6
    New Coder
    Join Date
    Oct 2006
    Posts
    82
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I'm using Chrome v26 - I'm made a quick video of what happens on my screen:

    http://frances.casafelipe.co.uk/iFrame.html

  • #7
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    ah, yeah - I see it, but don't know why that would be. I'm using Chrome 26 as well, and I don't get that happening, either on jsfiddle or testing locally


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •