The function used to create the custom animation.
return value: JQuery animate (params, [duration], [easing], [callback])
If you are using a string value such as "Hide," "Show," or "toggle," the default animated form is called for the property. Paramsoptions a group of packages
Contains a collection of style attributes and their values as animated and final values
Params object {}, note: All specified properties must be in camel form, for example with MarginLeft instead of margin-left, if you are using "hide",
A string value such as "show" or "toggle", the default animated form is called for the property.
Duration (optional) A string of three predetermined speeds ("slow", "normal", or "fast") or a millisecond value that represents the duration of the animation (for example: 1000)
Easing (optional) the name of the erase effect to use for string (requires plug-in support). Default jquery provides "linear" and "swing"
Callback (optional) function to execute when the animation is complete
0. Stop the animation
?
123 |
if ($( ‘.swaplist,.mainlist‘ ).is( ‘:animated‘ )){ $( ‘.swaplist,.mainlist‘ ).stop( true , true ); } |
Animate instances:
1. Several different attributes of the DIV element change after clicking the button
?
12345678 |
$(
"#go"
).click(
function () {
$(
"#block"
).animate({
width:
"90%"
,
height:
"100%"
,
fontSize:
"10em"
,
borderWidth: 10
}, 1000);
});
|
2. Let the specified element move around
?
123456 |
$(
"#right"
).click(
function () {
$(
".block"
).animate({ left:
‘+50px‘ },
"slow"
);
});
$(
"#left"
).click(
function () {
$(
".block"
).animate({ left:
‘-50px‘ },
"slow"
);
});
|
3. Toggle the height and transparency of paragraphs within 600 milliseconds
?
123 |
$( "p" ).animate({ height: ‘toggle‘ , opacity: ‘toggle‘ }, "slow" ); |
4. Use 500 milliseconds to move the paragraph to the left 50 and show it clearly (transparency is 1)
?
123 |
$( "p" ).animate({ left: 50, opacity: ‘show‘ }, 500); |
5. Toggle Show Hidden
?
1234567891011 |
$(
".box h3"
).toggle(
function
(){
$(
this
).next(
".text"
).animate({height:
‘toggle‘
, opacity:
‘toggle‘
},
"slow"
);
$(
this
).addClass(
"arrow"
);
return false
;
},
function
(){
$(
this
).next(
".text"
).animate({height:
‘toggle‘
, opacity:
‘toggle‘
},
"slow"
);
$(
this
).removeClass(
"arrow"
);
return false
;
});
});
|
?
12345 |
//滚动焦点 $(window).scroll( function () { //当前窗口的滚动事件 var winTop = $(window).scrollTop(); //获取当前窗口的大小 var objTop = $( "#obj1" ).offset().top; //获取当前对象的x坐标 }); |
Introduction to the use of jquery animated animate methods