>  기사  >  웹 프론트엔드  >  jQuery 애니메이션 애니메이션 method_jquery 사용 소개

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

WBOY
WBOY원래의
2016-05-16 17:34:311417검색
复제대码 代码如下:

$(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 代码 :




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



复aze代码


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



复主代码


代码如下:

$("p").animate({
opacity: 'show'
}, "slow", "easein");
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.