JQuery 总结 jQuery 效果动画
Posted nice2018
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery 总结 jQuery 效果动画相关的知识，希望对你有一定的参考价值。
一 切换
1.基本
show()展示,hide()隐藏,toggle()切换
show()展示,hide()隐藏,toggle()切换
btn.click(function () { btn1.toggle( "slow",function () { 这个效果完成后 执行后面的fun函数 div.css({ background:"red" }) }); })
2.滑动效果
slideDown 显示 slideUp 隐藏 slideToggle 来回滑动切换
slideDown 显示 slideUp 隐藏 slideToggle 来回滑动切换
btn.click(function () {
div.slideToggle(); 显示效果
})
3.淡入淡出
fadeIn(出来) fadeOut(隐藏) fadeToggle(来回变化) fadeTo(1000,0.4) 花 1秒变成0.4透明度
$(".btn1").click(function(){
$("p").fadeTo(1000,0.4);
});
1秒之后执行后面的函数
$(".btn1").click(function(){$("p").fadeOut(1000,function(){
$(".btn1").css("color","red")
});
eg:案例展示：点击菜单 显示或者隐藏下面的内容，
主要用到函数
div.slideToggle() 然后设置一个开关，动态调整箭头的方向
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{width: 440px;height: 200px;} input{width: 100px;height: 300px;background-color: red} ul{ background-color: red } </style> </head> <body> <ul><strong>九江长虹妇产医院</strong> <span>V</span> <li>a1</li> <li>a2</li> <li>a3</li> <li>a4</li> <li>a5</li> <li>a6</li> <li>a7</li> <li>a8</li> </ul> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script> var li =$("li"); var strong =$("strong"); var btn1 =$("#btn1"); var onoff=true; strong.click(function () { li.slideToggle(500); if (onoff) { $("span").text("V"); onoff=false; } else{ $("span").text("^"); onoff=true; } }) // btn1.click(function () { // div.slideDown(); // }) </script> </body> </html>
二 animate 动画
1. 同时执行
$.animate({top:200,left:50},5000,function(){})
动画改变的内容 时间 动画结束的函数
2. 顺序执行
$("li").animate({ top:0, left:300},1000)
$("li").animate({ top:300, left:300},1000)
等同于：
$("li").on("click",function () {
$("li").animate({ top:0, left:300},1000,function () {
$("li").animate({ top:300, left:300},1000)
}) 注意 left:"+=30" 可以做累加动画
3.延迟动画
$("li").delay(2000).animate({ top:0, left:"+=300"},100)
4.停止动画
$("li").stop();
strong.click(function test() {
ul.animate({
top:200,
left:200,
ul:ul.css({ backgroundColor:"orange"})
},5000,function () {
ul.animate({
top:0,
left:0,
ul:ul.css({ backgroundColor:"red"}) 注意这个地方改变背景颜色 用这种方式 也是奇怪
// backgroundColor:"red"
},5000,function () {
test()
}) })
})
以上是关于JQuery 总结 jQuery 效果动画的主要内容，如果未能解决你的问题，请参考以下文章