JQuery 总结（2） 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{ 440px;height: 200px;}
    input{ 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()
    }) })
  })