jQuery内置动画和多库共存

<!--

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

1. fadeIn(): 带动画的显示

2. fadeOut(): 带动画隐藏

3. fadeToggle(): 带动画切换显示/隐藏

 

-->

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

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

2. stop(): 停止动画

<!--

滑动动画

1. slideDown(): 带动画的展开

2. slideUp(): 带动画的收缩

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

-->

<!--

显示隐藏，默认没有动画

1. show(): (不)带动画的显示

2. hide(): (不)带动画的隐藏

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

-->

  $('#btn3').click(function () {

    // 1). 移动距离为(100, 50)

    /*$div1.animate({

      left: '+=100',

      top: '+=50'

    }, 1000)*/

 

    // 2). 移动距离为(-100, -20)

    $div1.animate({

      left: '-=100',

      top: '-=20'

    }, 3000)

  })

 

  $('#btn4').click(function () {

    $div1.stop()

  })

jQ多函数库共存

问题 : 如果有2个库都有$, 就存在冲突

解决 : jQuery库可以释放$的使用权, 让另一个库可以正常使用, 此时jQuery库只能使用jQuery了

API : jQuery.noConflict()

-->

<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('+++++')

 

<!--

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

  * window.onload

    * 包括页面的图片加载完后才会回调(晚)

    * 只能有一个监听回调

  * $(document).ready()

    * 等同于: $(function(){})

    * 页面加载完就回调(早)

    * 可以有多个监听回调

-->

转载于:https://www.cnblogs.com/love-life-insist/p/9063716.html