Web之jQuery动画效果

timg.jpg

动画

显示隐藏

$(selector).hide(speed,callback);
$(selector).show(speed,callback);

 $("div").show(a,fn)
//可以出入2个参数
a是时长 可以是数字和字符串行(slow, fast)等
fn是回调函数，用于完成是的回调

滑动

• jQuery 拥有以下滑动方法：
  • slideDown()
  • slideUp()
  • slideToggle()
• 语发： $(selector).slideDown(speed,callback);
  • speed效果的时长 它可以取以下值："slow"、"fast" 或毫秒。
  • callback回调函数

  <script src="jquery-1.11.1.minjs.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {

            $("button").click(function () {

                $("div").slideDown(1000);

            });

        });
    </script>

110.gif

淡出淡入

• fadeOut() 用于淡出可见元素
• fadeIn() 用于淡入已隐藏的元素。
• fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
• fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。更改透明度

停止动画

• $(selector).stop(stopAll,goToEnd);

  • 可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,如果是true，表示清空队列，就是后面的动画都不执行了

  • goToEnd 参数规定是否立即完成当前动画。默认是 false。如果为true，表示立即执行当前动画，然后在执行后续动画

  • stop(false)停止当前动画，后续队列中的动画继续执行

  • stop(true)停止当前动画，并清空队列中的所有动画

  • stop(false,true)当前动画立即执行完毕，后续队列中的动画继续执行

  • stop(true,true)当前动画立即执行完毕，并清空后续队列中的所有动画