jQuery-jQuery动画&导航动态显示效果

jQuery

内置动画

• 淡入淡出: 不断改变元素的透明度来实现的

  1. fadeIn(): 带动画的显示
  2. fadeOut(): 带动画隐藏
  3. fadeToggle(): 带动画切换显示/隐藏

  /*
   需求：
   1. 点击btn1, 慢慢淡出
     * 无参
     * 有参
       * 字符串参数
       * 数字参数
    */
  var $div1=$('.div1');
    $('#btn1').click(function () {
      $div1.fadeOut(1000);
    });
  /*
   2. 点击btn3, 慢慢淡入
   */
    $('#btn2').click(function () {
      $div1.fadeIn(1000);
    });
  /*
   3. 点击btn3, 淡出/淡入切换，动画结束时提示“动画结束了”
   */
  $('#div3').click(function () {
    $div1.fadeToggle();
  })
  

• 滑动动画

  1. slideDown(): 带动画的展开
  2. slideUp(): 带动画的收缩
  3. slideToggle(): 带动画的切换展开/收缩

  /*
   需求：
   1. 点击btn1, 向上滑动
   */
    var $div1=$('.div1');
    $('#btn1').click(function () {
      $div1.slideUp(3000);
    });
  /*
   2. 点击btn3, 向下滑动
   */
  $('#btn2').click(function () {
    $div1.slideDown(3000);
  });
  /*
   3. 点击btn3, 向上/向下切换
   */
  $('#btn3').click(function () {
    $div1.slideToggle();
  });
  

• 显示隐藏，默认没有动画, 动画(opacity/height/width)

  1. show(): (不)带动画的显示
  2. hide(): (不)带动画的隐藏
  3. toggle(): (不)带动画的切换显示/隐藏

  /*
  需求:
  1. 点击btn1, 立即显示
  2. 点击btn2, 慢慢显示
  3. 点击btn3, 慢慢隐藏
  4. 点击btn4, 切换显示/隐藏
   */
  var $div1 = $('.div1')
  //1. 点击btn1, 立即显示
  $('#btn1').click(function () {
    $div1.show()
  })
  
  //2. 点击btn2, 慢慢显示
  $('#btn2').click(function () {
    $div1.show(1000)
  })
  
  //3. 点击btn3, 慢慢隐藏
  $('#btn3').click(function () {
    $div1.hide(1000)
  })
  
  //4. 点击btn4, 切换显示/隐藏
  $('#btn4').click(function () {
    $div1.toggle(1000)
  })
  

• jQuery动画本质 : 在指定时间内不断改变元素样式值来实现的

  1. animate(): 自定义动画效果的动画

     /*
      需求：
      1.逐渐扩大
        1.宽度扩大
        2.宽度和高度扩大
        3.先宽度扩大后高度扩大
        */
       var $div1=$('.div1');
       $('#btn1').click(function () {
         // $div1.animate({
         //   width:200,
         //   height:200
         // },1000)
         $div1
                 .animate({
                   width:200
                 },1000)
                 .animate({
                   height:200
                 },1000)
       });
     
     /*
      2.移动到指定位置
       1.移动到(500,100)处
       2.移动到(100,20)处
     */
       $('#btn2').click(function () {
         $div1.animate({
           left: 500,
           top:100
         },1000)
       });
       /*
        3.移动到指定的距离
       */
       $('#btn3').click(function () {
         $div1.animate({
           left: '+=100',
           top: '-=50'
         },3000)
       });
     

  2. stop(): 停止动画

     $('#btn4').click(function () {
       $div.stop();
     });
     

---

导航动态显示效果

        <div id="navigation">
          <ul>
            <li><a href="#">首 页</a></li>
            <li><a href="#">衬 衫</a>
              <ul>
                <li><a href="#">短袖衬衫</a></li>
                <li><a href="#">长袖衬衫</a></li>
                <li><a href="#">无袖衬衫</a></li>
              </ul>
            </li>
            <li><a href="#">卫 衣</a>
              <ul>
                <li><a href="#">开襟卫衣</a></li>
                <li><a href="#">套头卫衣</a></li>
              </ul>
            </li>
            <li><a href="#">裤 子</a>
              <ul>
                <li><a href="#">休闲裤</a></li>
                <li><a href="#">卡其裤</a></li>
                <li><a href="#">牛仔裤</a></li>
                <li><a href="#">短裤</a></li>
              </ul>
            </li>
            <li><a href="#">联系我们</a></li>
          </ul>

​

        $('#navigation>ul>li:has(ul)').hover(function () {
          //动画展开
          $(this).children('ul').stop().slideDown();
        },function () {
          //动画收缩
          $(this).children('ul').stop().slideUp();
        });

---

多库共存

• 问题 : 如果有2个库都有$, 就存在冲突
  解决 : jQuery库可以释放$的使用权, 让另一个库可以正常使用, 此时jQuery库只能使用jQuery了
  API : jQuery.noConflict()

• 先定义一个myLib.js文件

  (function () {
    window.$ = function () {
      console.log('my lib $()...')
    }
  })();
  

• <script type="text/javascript" src="js/myLib.js"></script>
  <script type="text/javascript" src="js/jquery-1.10.1.js"></script>
  <script type="text/javascript">
    //释放$的使用权
    jQuery.noConflict();
    //调用myLib中的$
    $();
    //想要使用jQuery的功能，只能使用jQuery
    jQuery(function () {
      console.log('文档加载完毕');
    });
    console.log('++++');//这个先执行
  
  </script>
  

---

区别onload与ready

区别: window.onload与 $(document).ready()

• window.onload
  • 包括页面的图片加载完后才会回调(晚)
  • 只能有一个监听回调
• $(document).ready()
  • 等同于: $(function(){})
  • 页面加载完就回调(早)
  • 可以有多个监听回调

<img id="logo" src="https://gss0.bdstatic.com/5bVWsj_p_tVS5dKfpU_Y_D3/res/r/image/2017-05-19/6fec71d56242b74eb24b4ac80b817eac.png">

通过输出图片的宽度来测试快慢

/*
 需求：
 1. 直接打印img的宽度，观察其值
 */
  console.log('直接',$('#logo').width());
/*
 2. 在 $(function(){}) 中 打印 img 的宽度
 */
$(function () {
  console.log('ready1',$('#logo').width())
});
$(function () {
  console.log('ready2',$('#logo').width())
});
/*
 3. 在 window.onload 中打印宽度
 */
window.onload=function(){
  console.log('onload1',$('#logo').width());
};
window.onload=function(){
  console.log('onload2',$('#logo').width());
};
/*
 4. 在 img 加载完成后打印宽度
 */
$('#logo').on('load',function () {
  console.log('img load',$(this).width())
})