Examples of jquery animated effects tutorials

This paper describes in detail the implementation of jquery animation effects in the form of Examples.

1. Self-made folding content block

The content blocks are as Follows:

<div class="module">  <div class="caption">    <span>标题</span>    <img src="rollup.gif" alt="rollup" title="rolls up this module"/>  </div>  <div class="body">    春江彼岸两大明星产品之一：超越型复式，在春江郦城97复式基础上再升级，终点： 春江彼岸两大明星产品之一：超越型复式，在春江郦城97复式基础上再升级，终点： 春江彼岸两大明星产品之一：超越型复式，在春江郦城97复式基础上再升级，终点： 春江彼岸两大明星产品之一：超越型复式，在春江郦城97复式基础上再升级，终点： 春江彼岸两大明星产品之一：超越型复式，在春江郦城97复式基础上再升级，终点： 春江彼岸两大明星产品之一：超越型复式，在春江郦城97复式基础上再升级，终点.   </div></div>

Binds a Point-click event to an IMG Element.

$( function () {    $( ‘div.caption img‘ ).click( function () {   //先找到img的父级元素，再找该父级元素的子元素   var $body = $( this ).closest( ‘div.module‘ ).find( ‘div.body‘ );   if ($body.is( ‘:hidden‘ )) {     $body.show();   } else {     $body.hide();   }    }); });You can also use the toggle method to toggle the display state of an Element. $( function () {    $( ‘div.caption img‘ ).click( function () {   $( this ).closest( ‘div.module‘ ).find( ‘div.body‘ ).toggle();    }); });The above is no animation effect, sometimes feel very abrupt. In fact, the Show,hide,toggle method can have animated Effects. Like what: $( function () {    $( ‘div.caption img‘ ).click( function () {   $( this ).closest( ‘div.module‘ ).find( ‘div.body‘ ).toggle( ‘slow‘ );    }); });Another example: $( function () {    $( ‘div.caption img‘ ).click( function () {   $( this ).closest( ‘div.module‘ ).find( ‘div.body‘ ).toggle( ‘slow‘ , function () {     $( this ).closest( ‘div.module‘ ).toggleClass( ‘rolledup‘ , $( this ).is( ‘:hidden‘ ))   });    }); }); 2. Make elements fade in and out fadeIn(speed, callback)    fadeOut(speed, callback) fadeTo(speed, opacity, callback) 3. Slide the element up and down slideDown(speed, callback) slideUp(speed, callback) slideToggle(speed, callback) 4. Stop the animation stop(clearQueue, gotoEnd) 5. Create a custom animation animate(properties, duration, easing, callback) $( ‘.classname‘ ).animate({opacity: ‘toggle‘ }, ‘slow‘ )If you write an extension function. $.fn.fadeToggle = function (speed){    return this .animate({opacity: ‘toggle‘ }, ‘slow‘ ); } 6. Custom Zoom Animations $( ‘.classname‘ ).each( function (){    $( this ).animate({      width: $( this ).width() * 2,      height: $( this ).height() * 2    }); }); 7. Custom Drop Animations $( ‘.classname‘ ).each( function (){    $( this )      .css( "position" , "relative" )      .animate({        opacity: 0,        top: $(window).height() - $( this ).height() - $( this ).position().top      }, ‘slow‘ , function (){ $( this ).hide(); }) }); 8. Custom Scatter animations $( ‘.classname‘ ).each( function (){    var position = $( this ).position();    $( this )      .css({        position: ‘absolute‘ ,        top: position.top,        left:position.left      })      .animate({        opacity: ‘hide‘ ,        width: $( this ).width()*5,        height: $( this ).height()*5        top: position.top - ($( this ).height() * 5 / 2),        left: position.left - ($( this ).width() * 5 /2)      }, ‘normal‘ ); }); 9. Animations in the queue //动画插入队列 $( ‘img‘ ).queue( ‘chain‘ , function (){}); $( ‘img‘ ).queue( ‘chain‘ , function (){}); $( ‘img‘ ).queue( ‘chain‘ , function (){}); $( ‘img‘ ).queue( ‘chain‘ , function (){}); $( ‘button‘ ).click( function (){    $( ‘img‘ ).dequeue( ‘chain‘ ); //删除队列中的动画 }) cleaeQueue(name) //删除所有未执行的队列中的动画 delay(duration, name) //为队列中所有未执行的动画添加延迟

Examples of jquery animated effects tutorials