jQuery效果之隐藏与显示、淡入淡出、滑动、回调

字数 113阅读 560
  • jQuery 隐藏与显示
  • jQuery 淡入淡出
  • jQuery 滑动
  • jQuery 动画
  • jQuery 停止动画
  • jQuery Callback
  • jQuery Chaining

jQuery 隐藏与显示

两个简单的很炫效果:

隐藏与显示动画1.gif

代码:

<p>你好吗</p>
  <button id="hide">隐藏</button>
  <button id="show">显示</button>
  <button id="toggle">隐藏/显示</button>
$(document).ready(function () {
   $("#hide").click(function () {
       $("p").hide(1000);
   }) ;
   $("#show").click(function () {
       $("p").show(1000);//1000毫秒
   }) ;
   $("#toggle").click(function () {
       $("p").toggle(1000);//同时控制显示与隐藏
   }) ;
});
隐藏与显示动画2.gif

代码:

<body>
  <p>你好吗</p>
 </button>-->
<script>
    for(var i = 0 ; i <5;i++){
        $("<div>").appendTo(document.body);
    }
    $("div").click(function () {
       $(this).hide(2000,function () {
           $(this).remove();//隐藏后移除掉div
       });
    });
</script>

jQuery 淡入淡出

首先看效果图:

淡入淡出效果.gif
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.min.js"></script>
    <script src="fadeInOut.js"></script>
</head>
<body>
    <button id="in">淡入</button>
    <button id="out">淡出</button>
    <button id="toggle">淡入/淡出</button>
    <button id="to">fadeto</button>
    <div id="div1" style="display: none; width: 80px;height: 80px;background-color: aqua"></div>
    <div id="div2" style="display: none; width: 80px;height: 80px;background-color: sienna"></div>
    <div id="div3" style="display: none; width: 80px;height: 80px;background-color: fuchsia"></div>
</body>
</html>
/**
 * Created by chuanglong02 on 17/1/24.
 */
$(document).ready(function () {
    $("#in").click(function () {
       $("#div1").fadeIn(1000);
       $("#div2").fadeIn(1000);
       $("#div3").fadeIn(1000);
    });
    $("#out").click(function () {
       $("#div1").fadeOut(1000);
       $("#div2").fadeOut(1000);
       $("#div3").fadeOut(1000);
    });
    $("#toggle").click(function () {
       $("#div1").fadeToggle(1000);
       $("#div2").fadeToggle(1000);
       $("#div3").fadeToggle(1000);
    });
    $("#to").click(function () {
       $("#div1").fadeTo(1000,1);
       $("#div2").fadeTo(1000,0.75);
       $("#div3").fadeTo(1000,0.3);//设置透明度
    });

});

jQuery 滑动 ,和上面显示隐藏是一样的

效果图:

滑动显示与隐藏.gif

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.min.js"></script>
    <script src="slide.js"></script>
    <style>
        #flipshow,#content,#fliphide,#flip{
            padding: 5px;
            text-align: center;
            background-color: #ece023;
            border: 1px solid red;
        }
        #content{
            padding: 50px;
            display: none;
        }

    </style>
</head>
<body>
    <div id="flipshow">显示</div>
    <div id="fliphide">隐藏</div>
    <div id="flip">显示/隐藏</div>
    <div id="content">helloword</div>

</body>
</html>
$(document).ready(function () {
   $("#flipshow").click(function () {
       $("#content").slideDown(1000);
   });
   $("#fliphide").click(function () {
       $("#content").slideUp(1000);
   });
   $("#flip").click(function () {
       $("#content").slideToggle(1000);
   });
});

回调 callback

动画在结束后都有个回调,可以执行一个或者多个方法:
效果图:

动画回调.gif
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.min.js"></script>
    <script src="callbakc.js"></script>
</head>
<body>
    <button>隐藏</button>
    <p>hello Worldhello Worldhello World</p>
</body>
</html>
$(document).ready(function () {
  $("button").click(function () {
      $("p").hide(1000,function () {
          // $("p").show(); //回调 ,动画执行之后的回调
          $("p").css("color","red").slideUp(1000).slideDown(1000);
      });
  });
});

推荐阅读更多精彩内容

  • 通过jQuery,您可以选取(查询,query)HTML元素,并对它们执行“操作”(actions)。 jQuer...
  • jQuery操作DOM元素 使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其...
  • jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性。...
  • 隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性。但是通过css...
  • (续jQuery基础(2)) 四、动画篇 第1章 动画基础隐藏和显示 (1)隐藏元素的hide方法 让页面上的元素...