Menu
Rather than simply dumping the HTML into the page I want it to be animated, how can I change the jQuery below to either animate or slide down as the HTML is inserted?
$('.button').click(function() {
j('.tweets ul').prepend(j('.refreshMe ul').html());
});
997
With jQuery, you can create custom animations.
The animate() method is typically used to animate numeric CSS properties, for example, width , height , margin , padding , opacity , top , left , etc. but the non-numeric properties such as color or background-color cannot be animated using the basic jQuery functionality. Note: Not all CSS properties are animatable.
An easing function specifies the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called swing , and one that progresses at a constant pace, called linear .
You can .hide() the content before doing a .prependTo(), then call .slideDown() on the element, like this:
$('.button').click(function() {
j('.refreshMe ul > *').clone().hide().prependTo('.tweets ul').slideDown();
});
This does .clone() of the children to move, rather than doing an innerHTML style copy, hides the cloned elements before moving them, then slides them down.
140
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
