一 切换 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() }) }) })
转载于:https://www.cnblogs.com/nice2018/p/9915721.html
