
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#hide").click(function(){
  $("p").hide();
  });
  $("#show").click(function(){
  $("p").show();
  });
});
</script>
</head>
<body>
<p id="p1">如果点击“隐藏”按钮，我就会消失。</p>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
</body>
</html>

toggle ( [ speed , [ easing ] , [ fn ] ] ) 切换


<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("p").toggle();
  });
});
</script>
</head>
<body>
<button type="button">切换</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
</html>

滑动效果

slideDown ( [ speed , [ easing ] , [ fn ] ] ) 下滑效果

slideUp ( [ speed , [ easing ] , [ fn ] ] ) 上滑效果

slideToggle ( [ speed , [ easing ] , [ fn ] ] ) 滑动切换

（1）参数都可以省略。

（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值

(如：1000)。

（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。

（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次


   <style>
        div {
            width: 150px;
            height: 300px;
            background-color: pink;
            display: none;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>
 
<body>
    <button>下拉滑动</button>
    <button>上拉滑动</button>
    <button>切换滑动</button>
    <div></div>
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                // 下滑动 slideDown()
                $("div").slideDown();
            })
            $("button").eq(1).click(function() {
                // 上滑动 slideUp()
                $("div").slideUp(500);
            })
            $("button").eq(2).click(function() {
                // 滑动切换 slideToggle()
                $("div").slideToggle(500);
            });
        });
    </script>
</body>

淡入淡出

fadeIn([speed,[easing],[fn]]) 淡入效果

fadeOut([speed,[easing],[fn]]) 淡出效果

fadeToggle([speed,[easing],[fn]]) 淡入淡出切换

fadeTo([[speed],opacity,[easing],[fn]]) 渐进方式调整到指定的不透明度

（1）opacity 透明度必须写，取值 0~1 之间。

（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值

(如：1000)。必须写

（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。

（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次


  <style>
        div {
            width: 150px;
            height: 300px;
            background-color: pink;
            display: none;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>
 
<body>
    <button>淡入效果</button>
    <button>淡出效果</button>
    <button>淡入淡出切换</button>
    <button>修改透明度</button>
    <div></div>
    <script>
        $(function () {
            $("button").eq(0).click(function () {
                // 淡入 fadeIn()
                $("div").fadeIn(1000);
            })
            $("button").eq(1).click(function () {
                // 淡出 fadeOut()
                $("div").fadeOut(1000);
            })
            $("button").eq(2).click(function () {
                // 淡入淡出切换 fadeToggle()
                $("div").fadeToggle(1000);
            });
            $("button").eq(3).click(function () {
                //  修改透明度 fadeTo() 这个速度和透明度要必须写
                $("div").fadeTo(1000, 0.5);
            });
        });
    </script>
</body>

自定义动画 animate

animate(params,[speed],[easing],[fn])

（1）params: 想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，

如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略。

（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值

(如：1000)。

（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。

（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次

jQuery animate() - 操作多个属性

生成动画的过程中可同时使用多个属性：


$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

jQuery animate() - 使用相对值

也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：


$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

jQuery animate() - 使用预定义的值

可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：


<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      height:'toggle'
    });
  });
});
</script> 
</head>
 
<body>
 
<button>开始动画</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
 
</body>
</html>

jQuery animate() - 使用队列功能

编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些

animate 调用。


$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});

jQuery 停止动画

jQuery stop() 方法用于停止动画或效果，在它们完成之前。

stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

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

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排

入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画。


$("#stop").click(function(){
  $("#panel").stop();
});

事件切换

hover ([over,]out)

（1）over:鼠标移到元素上要触发的函数（相当于mouseenter）

（2）out:鼠标移出元素要触发的函数（相当于mouseleave）

（3）如果只写一个函数，则鼠标经过和离开都会触发它


 // 1. 事件切换 hover 就是鼠标经过和离开的复合写法
            $(".nav>li").hover(function() {
                $(this).children("ul").slideDown(200);
            }, function() {
                $(this).children("ul").slideUp(200);
            });

jQuery Callback 函数

$(selector).hide(speed,callback)

由于 JavaScript 语句（指令）是逐一执行的 - 按照次序，动画之后的语句可能会产生错误或页面冲

突，因为动画还没有完成。

为了避免这个情况，您可以以参数的形式添加 Callback 函数。

当动画 100% 完成后，即调用 Callback 函数。


<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("p").hide(1000,function(){
    alert("The paragraph is now hidden");
    });
  });
});
</script>
</head>
<body>
<button type="button">Hide</button>
<p>This is a paragraph with little content.</p>
</body>
</html>

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】