admin管理员组

文章数量:1400420

I am trying to add a bounce effect to my animation but am having trouble doing so. I have been following the jQuery API animate() page but I keep failing. I am trying to create an effect where my object slides in from the top and bounces before settling into place.

$(this).animate( {
        "top": "+=100px"
    }, { 
        duration: '400',
        specialEasing: {
            width: 'linear',
            height: 'easeOutBounce'
        },
    }
);

I am trying to add a bounce effect to my animation but am having trouble doing so. I have been following the jQuery API animate() page but I keep failing. I am trying to create an effect where my object slides in from the top and bounces before settling into place.

$(this).animate( {
        "top": "+=100px"
    }, { 
        duration: '400',
        specialEasing: {
            width: 'linear',
            height: 'easeOutBounce'
        },
    }
);

• javascript
• jquery

Share Improve this question Follow edited Oct 10, 2017 at 10:42 vsync 131k5959 gold badges340340 silver badges423423 bronze badges asked Jun 29, 2012 at 1:35 JonJon 2,39977 gold badges2626 silver badges3232 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

I'm not quite sure of what element specifically you're hoping to bounce, but try this:

$(this).animate({ "top" : "+=100px" }, 400, "easeOutBounce");

This requires the jQuery Easing plugin. More info, github or CDN.

Demo:

$("#target").animate({ "top" : "+=100px" }, 400, "easeOutBounce");

#target{ position:absolute; left:50px; top:50px; background:red; }

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>

<div id='target'>Hellow World<div>

To Achieve a bounce easing effect with jQuery, you would need to extend the limited number of available easing methods and add more advance ones. Here's a plugin for that which offer many cool easing functions.

You can also copy the easing method which you need (if you don't need the whole range of possibilities the plugin brings to the table) and incorporate it somewhere in your code:

/* jQuery easing */
jQuery.extend( jQuery.easing,{
    def: 'easeOutQuad',
    easeOutBounce: function (x,t,b,c,d) {
        if ((t/=d) < (1/2.75)) {
            return c*(7.5625*t*t) + b;
        } else if (t < (2/2.75)) {
            return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
        } else if (t < (2.5/2.75)) {
            return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
        } else {
            return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
        }
    }
});

Demo:

function bounceDown(){
  $('.ball').animate({top:150}, 1000, 'easeOutBounce', onEnd);
}

function onEnd(){
  $(this).animate({top:0}, 500, 'easeOutCubic', bounceDown);
}

bounceDown();

.ball{ 
  background:red; 
  border-radius:50%;
  display: inline-block;
  padding:30px;
  position:relative;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>

<div class='ball'></div>

本文标签： javascriptjQuery easing Bounce animationStack Overflow