jQuery 애니메이션 애니메이션 method_jquery 사용 소개-JS 튜토리얼-php.cn

jQuery 애니메이션 애니메이션 method_jquery 사용 소개

WBOY

풀어 주다： 2016-05-16 17:34:31

원래의

1442명이 탐색했습니다.

$(function() {
$("#left" ).click(function(){
$(".block").show();
$(".block").animate({
너비: " 200px",
높이 : " 200px",
fontSize: "1em",
borderWidth: 10
}, "slow","swing")
$("#right"); .click(function(){
$(".block").show();
$(".block").animate({
width: "-200px",
height : "-200px",
fontSize: "10em",
}, "slow","swing")
});
/*
$("p"). animate({
높이: '200px', 불투명도: 'toggle'
}, "slow")
$("p").animate({
왼쪽: 50, 불투명도: ' show'
}, 500) */
//先渐隐
$("p").animate({
opacity: 'toggle'
}, "slow", "스윙");
//后显示
$("p").animate({
opacity: 'show'
}, 500,function() { Alert('加载完成' ); })
});

<본문>

张梓宇测试

返回值:jQueryanimate(params, [지속 시간], [완화], [콜백])
概述
사용자 정의는 动画적 인 函数입니다.
关键는 于指定动画형으로 及结果样式属性对象입니다. 불투명도”). ，比如用marginLeft代替margin-left.
이는 매우 강력한 성능을 제공합니다.到指定值.如果使用是"숨기기"、"표시"或"toggle"은 jQuery 1.2에서 em과 % 单位을 사용합니다.
jQuery 1.2에서 % 单位.以通过이 属性值前면에 있습니다.指정 " =" 或 "-=" 来让元素做接完成动画。画。
参数
paramsOptions는 특정 유형과 유형의 유형을 결정하는 속성 및 문자 유형의 선택
기간(可选)String,Number 3가지 유형으로 결정됩니다.("slow", "normal", 또는 "fast")는 easing(可选)String을 사용하여 이름을 지정(需要插件支持)합니다.供"선형" 和 "스윙".
콜백(可选)함수는 动画完成执行的函数
示例
描述:
点击按钮后div元素的几个不同属性一同变化
HTML代码:

复代码码代码如下: // 日个动画中同时应用三种类型的效果

$("#go").click(function(){

$("#block").animate({ 
너비: "90%", 
높이: "100%", 
fontSize: "10em", 
borderWidth: 10 
}, 1000 ) 
}); 

 
描述: 
让指정원素左右移动 

HTML 代码:

复主代码代码如下: $("#right").click(function(){

$(".block").animate({왼쪽: ' 50px'}, "느림 ");

}); 
$("#left").click(function(){ 
$(".block").animate({left: '-50px'}, "slow"); 
});   
 描述 :  jQuery 代码 : 
 
 

代码如下:

$("p").animate({ height: 'toggle', opacity: 'toggle' }, "slow" );

描述:

500毫秒将段落移到left为50的地方并且完全清晰显示take来（透明島为1） 
jQuery 代码: 

复aze代码

代码如下:

$("p").animate({ 왼쪽: 50, 불투명도: ' 표시' }, 500);

描述:

一个使사용 “easein”函数提供不同动画样式的例子。只有使用了插件来提供这个“easein”函数，这个参数才起작용。 
jQuery 代码: 

复主代码

代码如下:

 
$("p").animate({ 
opacity: 'show' 
}, "slow", "easein"); 