Jquery动画效果设置大全

<!DOCTYPE html>

<head>

<title>Document</title>

#box{

width: 100px;

height: 100px;

background: red;

display: none;

}

</style>

</head>

<body>

//Jquery动画设置所有方法如下

show() :显示 display->block

hide() 隐藏 display->none

toggle() 切换显示和隐藏

slideDown() 向下滑动改变display和高度（参数为毫秒，滑动时间）

slideUp() 向上滑动改变display和高度

slideToggle() 切换上下滑动

fadeIn() 淡入 opacity->1

fadeOut() 淡淡入出 opacity->0

fadeTo() 改变透明度

fadeToggle() 切换淡入淡出

animate() 自定义动画

stop() 停在当前位置

finish() 终止动画，停在最终位置

delay() 设置延迟

　//html代码

<button>显示隐藏</button>

<button>结束</button>

<button>停止</button>

<div id="box"></div>

　　//例子

$("button").eq(0).click(function(){

$("#box").show(); //第一个按钮点击的时候，div元素从隐藏的状态显示出来

});

$("button").eq(0).mouseover(function(){

$("#box").show(); //鼠标放到第一个按钮的时候，div元素从隐藏的状态显示出来

}).mouseout(function(){

$("#box").hide(); //鼠标移开时，div元素从显示状态隐藏起来

});

$("button").eq(0).click(function(){

$("#box").toggle(); //第一个按钮点击的时候，div元素从显示状态隐藏起来

});

$("button").eq(0).click(function(){

//$("#box").slideDown(1000); //向下的滑动时间是1秒

$("#box").slideToggle(); //切换上下滑动

});

$("button").eq(0).click(function(){

$("#box").fadeIn(2000); //淡入时间为2秒,淡入的意思是显示出来时间

//$("#box").fadeOut(2000);

$("#box").fadeToggle(2000); //淡入淡出

//$("#box").fadeTo(2000,0.9); //改变透明度

});

$("#box").css("display","block");

$("button").eq(0).click(function(){

$("#box").delay(2000).animate({ //第一个按钮点击的时候，div元素将再2秒后飘逸，

"margin-left":"200px",

"margin-top":"200px"

},2000); //这个时间是指整个过程的持续时间

});

$("button").eq(1).click(function(){

$("#box").finish(); //第二个按钮点击的时候，运动中的动画立刻停在结束位置

});

$("button").eq(2).click(function(){

$("#box").stop(); //第三个按钮点击的时候，正在运动中的动画立刻停止当前位置

});

　　//部分网页显示效果

</script>

</body>

</html>

巴特西

Jquery动画效果设置大全

最新文章

热门文章