第五篇 jQuery特效与动画

Posted 2020-09-17 youguess

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第五篇 jQuery特效与动画相关的知识，希望对你有一定的参考价值。

5.1 show()与hide()方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>show()与hide()方法</title>
<style type="text/css">
  body{ font-size:13px;}
  .artFram{ border:solid 1px #ccc; background-color:#eee; width:260px; padding:8px; word-break:break-all;}
  .artList{ line-height:1.8em;}
  #showandhide{}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
  $(function(){
    var $link = $(".artList a");
    var $hide = $(".artList :eq(4)");
    $link.click(function(){
      if($(this).html()=="显示")
      {
          $(this).html("隐藏");
          $hide.show();

      }
      else
      {
          $(this).html("显示");
          $hide.hide();
      }
    })
  })
</script>
</head>
<body>

  <div class="artFram">
    <div class="artList">
      <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <br />
      <span>111显示显示显示</span>
        <br>
      <span id="showandhide" style="display:none;">2222222</span>
      <br />
      <a href="javascript:void(0)">显示</a>
    </div>
  </div>

</body>
</html>

5.2 动画效果的show()与hide()方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动画效果的show()与hide()方法</title>
<style type="text/css">
  body{ font-size:13px;}
  img{ display:none; cursor:pointer;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
  $(function(){
    //show(speed,[callback])
    //hide(speed,[callback])
    $("a").click(function(){
      $("img").show(3000,function(){
          $(this).css("border","solid 1px #ccc");
          })    
    })
    //
    $("img").click(function(){
      $(this).hide(3000);
    })
  })
</script>
</head>
<body>
  <a href="javascript:void(0)">显示</a>
  <img src="img/1.png" />
</body>
</html>

5.3 toggle()方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>toggle()方法</title>
<style type="text/css">
  body{ font-size:13px;}
  .divFrame{ width:180px;}
  .divFrame .divMenu{ float:left;}
  .divFrame .divContent{ float:right;}
  .divFrame .divContent img{ display:none;}
  .btn{ border:#666 1px solid; padding:2px; width:80px; margin-bottom:5px;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
  $(function(){
    //--切换元素可见状态,如果是显示状态,则变成隐藏状态;如果是隐藏状态,则变成显示状态
    //toggle()
    //toggle(switch)
    //toggle(speed,[callback])
    $("input:eq(0)").click(function(){
      $("img").toggle();  
    })
    
    $("input:eq(1)").click(function(){
      var intI = 0;
      var blnA = intI > 1;
      $("img").toggle(blnA); //blnA--false
    })
    
    $("input:eq(2)").click(function(){
      $("img").toggle(3000,function(){
          $(this).css({"border":"solid 1px #ccc","padding":"2px"});
          });
    })

    /*无论是show(),hide(),toggle(),当以动画效果切换页面元素可见状态时,其元素的width,height,padding和margin属性都将以动画的效果展示*/
    
  })
</script>
</head>
<body>

  <div class="divFrame">
    <div class="divMenu">
      <input id="Button1" type="button" value="无参数" class="btn" /><br />
      <input id="Button2" type="button" value="逻辑显示" class="btn" /><br />
      <input id="Button3" type="button" value="动画显示" class="btn" />
    </div>
    <div class="divContent">
      <img src="img/2.png" alt="" />
    </div>
  </div>

</body>
</html>

5.4 slideDown()与slideUp()

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>slideDown()与slideUp()</title>
<style type="text/css">
  body{ font-size:13px;}
  .divFrame{ width:100px; border:solid 1px #666;}
  .divFrame .divTitle{ padding:5px; background-color:#eee;}
  .divFrame .divContent{ padding:8px;}
  .divFrame .divContent img{ border:solid 1px #ccc; padding:2px;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>

    //滑动的动画效果就是改变元素的高度
    //slideDown(speed,[callback]) --以动画的效果将所选择元素的高度向下增大,呈现一种"滑动"的效果,而元素的其他属性并不发生变化
    // [callback] --为动画显示完成后,执行的回调函数...
    //slideUp(speed,[callback]) -- 以动画的效果将所选择元素的高度向上减小...

  $(function(){
      var blnShow = false;
      var $Title = $(".divTitle");
      var $Tip = $("#divTip");
      
      $Title.click(function(){
        if(!blnShow)
        {
            $("img").slideUp(3000,function(){
                $Tip.html("关闭成功！");
                });
            $(this).html("显示图片");
            blnShow = true;
        }
        else
        {
            $Tip.html("");
            $("img").slideDown(3000);
            $(this).html("隐藏图片");
            blnShow = false;
        }
      })

  })
</script>
</head>
<body>

  <div class="divFrame">
    <div class="divTitle">隐藏图片</div>
    <div class="divContent">
      <img src="img/3.png" alt="" />
      <div id="divTip"></div>
    </div>
  </div>

</body>
</html>

5.5 slideToggle()方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>slideToggle()方法</title>
<style type="text/css">
  .divFrame{ border:solid 1px #666; background-color:#eee; padding:5px; width:149px;}
  .divFrame img{ border:solid 1px #eee; padding:2px;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
  $(function(){
    //slideToggle(speed,[callback]) --以动画的效果切换所选择元素的高度,即:如果高,则减小;如果低,则增大.
    $(".divFrame").click(function(){
        $("img").slideToggle(3000,function(){
              $("img").css("border","solid 1px #ccc");
            });
        });
  })
</script>
</head>
<body>

  <div class="divFrame">
    <img src="img/1.png" alt="" title="111" />
  </div>

</body>
</html>

5.6 fadeIn()和fadeOut()方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>fadeIn()和fadeOut()方法</title>
<style type="text/css">
    .divFrame{ border: solid 1px #666;width: 188px;text-align: center;}
    .divFrame .divTitle{background-color: #eee;padding: 5px 0px 5px 0px;}
    .divFrame .divContent{padding: 5px 0px 5px 0px;}
    .divFrame .divContent img{border: solid 1px #eee;padding: 2px;}
    .divFrame .divTip{position: absolute;padding: 90px 0px 0px 60px;font-size: 13px;font-weight: bold;}
    .btn{border: #666 1px solid;padding: 2px;width: 80px;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
  //fadeIn(speed,[callback]) --通过改变所选元素透明度,实现淡入的动画效果
  //fadeOut(speed,[callback]) --通过改变所选元素透明度,实现淡出的动画效果

    $(function(){

        //fadeIn
        $("#Button1").click(function(){
            $(".divTip").html("");
            $("img").fadeIn(3000,function(){
                $(".divTip").html("淡入");
            })
        })

        //fadeOut
        $("#Button2").click(function(){
            $(".divTip").html("");
            $("img").fadeOut(3000,function(){
                $(".divTip").html("淡出");
            })
        })

    })

</script>
</head>
<body>

<div class="divFrame">
    <div class="divTitle">
        <input id="Button1" type="button" value="fadeIn" class="btn"/>
        <input id="Button2" type="button" value="fadeOut" class="btn"/>
    </div>
    <div class="divContent">
        <div class="divTip"></div>
        <img src="img/1.png" alt="" title=""/>
    </div>
</div>

</body>
</html>

5.7 fadeTo()方法

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>fadeTo()方法</title>
<style type="text/css">
    .divFrame{border: solid 1px #666;width: 197px;text-align: center;}
    .divFrame .divTitle{background-color: #eee;padding: 5px 0px 5px 0px;}
    .divFrame .divContent{padding: 5px 0px 5px 0px;}
    .divFrame .divContent img{border: solid 1px #eee;}
</style>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
  //fadeTo(speed,opacity,[callback]) --将所选择元素的不透明度以动画的效果调整到指定的不透明度值
  //opacity --> 0.0-1.0
    $(function(){
        $("#Select1").change(function(){
            var fitValue = $("#Select1").val();
            $("img").fadeTo(3000,fitValue);
        })
    })
</script>
</head>
<body>

<div class="divFrame">
    <div class="divTitle">
        <select name="" id="Select1">
            <option value="0.2">0.2</option>
            <option value="0.4">0.4</option>
            <option value="0.6">0.6</option>
            <option value="0.8">0.8</option>
            <option value="1.0" selected="selected">1.0</option>
        </select>
    </div>
    <div class="divContent">
        <img src="img/1.png" title="">
    </div>
</div>

</body>
</html>

以上是关于第五篇 jQuery特效与动画的主要内容，如果未能解决你的问题，请参考以下文章

第五篇：模块

javascript动画系列第五篇——模拟滚动条

JQuery特效与动画总结

javaWeb核心技术第五篇之jQuery

jQuery的动画与特效

jquery 的动画与特效