Difference between revisions of "Animate"

From rbachwiki
Jump to navigation Jump to search
Line 28: Line 28:
// you have to install jquery UI to get the Easein functiolality
// you have to install jquery UI to get the Easein functiolality
</pre>
</pre>
[http://easings.net/ Different ease animations]<br>
==[http://easings.net/ Different ease animations]==<br>


[[#top|Back To Top]]<  —  >[[JQuery|Category]]<  —  >[[Main_Page| Home]]
[[#top|Back To Top]]<  —  >[[JQuery|Category]]<  —  >[[Main_Page| Home]]

Revision as of 17:20, 28 December 2016

Animate

HTML

<div id="filters">
<button id="filter-berry">Toggle berry flavors</button>
<!-- <button id="filter-citrus">Toggle citrus</button> -->
</div>

Jquery

 $('#filter-berry').click(function(e) {
        e.preventDefault();
        $('#cart-water').find('.berry')
            .animate({
                'margin-left': '50',
                'height': '70',
                'opacity': '.5',
                'font-size': '120%'

            }, 3000,easeInOutElastic);
    });

// you can also add a callback function that runs after the animation.
}, 3000,easeInOutElastic, function(){
 $(this).remove();
});
// you have to install jquery UI to get the Easein functiolality

==Different ease animations==

Back To Top< — >Category< — > Home