jQuery学习四——效果

最新推荐文章于 2025-08-08 17:07:36 发布

转载最新推荐文章于 2025-08-08 17:07:36 发布 · 69 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/pengsi/p/7904561.html

文章标签：

#javascript #ViewUI

本文介绍了使用jQuery实现的各种动画效果，包括显示和隐藏元素、淡入淡出、滑动动画及自定义动画等，并展示了如何通过代码控制这些效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.显示，隐藏：

<!DOCTYPE html>
<html>
<head>
    <title>jquery事件</title>
</head>
<script type="text/javascript" src='./js/jquery-3.2.1.min.js'></script>
<script type="text/javascript">
    $(document).ready(function(){
      $('#hide').click(function() {
          $('#p1').hide();
      });
      $('#show').click(function() {
          $('#p1').show();
      });
    });

</script>
<body>
<p id="p1">看看我显示还是隐藏</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
</body>
</html>

toggle()切换显示，隐藏：

<!DOCTYPE html>
<html>
<head>
    <title>jquery事件</title>
</head>
<script type="text/javascript" src='./js/jquery-3.2.1.min.js'></script>
<script type="text/javascript">
    $(document).ready(function(){
      $('button').click(function() {
          $('#p1').toggle();
      });
    });

</script>
<body>
<p id="p1">看看我显示还是隐藏</p>
<button id="hide">隐藏</button>
</body>
</html>

2.淡入淡出：

<script type="text/javascript">
    $(document).ready(function(){
      $('button').click(function() {
          $('#p1').toggle();
          $('#p1').fadeIn();  // 淡入已隐藏的元素
          $('#p1').fadeOut();  // 淡出可见元素
          $('#p1').fadeToggle();  // 在 fadeIn() 与 fadeOut() 方法之间进行切换
          $("#p1").fadeTo("slow",0.15); // 允许渐变为给定的不透明度（值介于 0 与 1 之间
      });
    });

</script>

3.滑动：

<!DOCTYPE html>
<html>
<head>
    <title>jquery事件</title>
    <style type="text/css"> 
        #panel,#flip
        {
            padding:5px;
            text-align:center;
            background-color:#e5eecc;
            border:solid 1px #c3c3c3;
        }
        #panel
        {
            padding:50px;
            display:none;
        }
    </style>
</head>
<script type="text/javascript" src='./js/jquery-3.2.1.min.js'></script>
<script type="text/javascript">
    $(document).ready(function(){
         $("#flip").click(function(){
         $("#panel").slideToggle("slow");
         $("#panel").slideDown("slow");
         $("#panel").slideUp("slow");
      });
    });
</script>
<body>
<div id="flip">点我，显示或隐藏面板。</div>
<div id="panel">Hello world!</div>
</body>
</html>

4.动画：

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

5.停止动画：

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

6.Callback:

$("button").click(function(){
  $("p").hide("slow",function(){
    alert("段落现在被隐藏了");
  });
});

7.链：

$("#p1").css("color","red")
  .slideUp(2000)
  .slideDown(2000);

转载于:https://www.cnblogs.com/pengsi/p/7904561.html