一 切换
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 总结（2） jQuery 效果动画
原文地址：https://www.cnblogs.com/nice2018/p/9915721.html