jQuery三组基本动画与自定义动画操作实例总结

下面我将为您详细讲解"jQuery三组基本动画与自定义动画操作实例总结"的攻略。

一、基本动画

1.淡入淡出动画

其中，fadeIn()和fadeOut()表示淡入和淡出。这两个函数会自动处理元素opacity（透明度）属性的变化：

<button id="btn1">逐渐显示和隐藏</button>
<script>
  $(document).ready(function(){
    $("#btn1").click(function(){
      $("p").fadeToggle();
    });
  });
</script>

上述代码中 fadeToggle（）函数会切换元素的显示和隐藏，并且带有淡入淡出效果。

2.滑动动画

其中，slideDown()和slideUp()表示向下滑动和向上滑动，slideUp()函数也可以替换成 slideToggle() 函数来切换页面元素的滑动状态：

<html>

<head>
  <style>
    #div1 {
      width: 100px;
      height: 100px;
      background-color: red;
      margin: auto;
      display: none;
    }
  </style>
  <script src="jquery-1.12.2.min.js"></script>
  <script>
    $(document).ready(function() {
      $("#flip").click(function() {
        $("#div1").slideToggle("slow");
      });
    });
  </script>
</head>

<body>

  <div id="flip">
    Click to slide down panel
  </div>
  <div id="div1">

  </div>

</body>

</html>

二、动画操作

针对上述基本动画，jQuery也提供了丰富的动画操作API，可以轻松地扩展、自定义动画。

1.自定义颜色动画

其中animate()函数可用于创建自定义动画，颜色动画更是常用动画之一：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery animate()函数</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: blue;
            margin: auto;
        }
    </style>
    <script type="text/javascript" src="jquery-3.5.1.min.js"></script>
</head>
<body>

<div id="div1">学习jQuery颜色动画</div>

<script>
    $(document).ready(function(){
        $("#div1").click(function(){
            $(this).animate({
                backgroundColor:'red',
                left:'500px',
                height:'+=150px',
                width:'+=150px'
            },3000);
        });
    });
</script>

</body>
</html>

2.多重动画执行

多重动画指的是同时执行多个动画效果。通过使用队列，我们可以实现这一需求：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery animate()函数</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: blue;
            margin: auto;
        }
    </style>
    <script type="text/javascript" src="jquery-3.5.1.min.js"></script>
</head>
<body>

<div id="div1">多重动画执行</div>

<script>
    $(document).ready(function(){
        function runIt() {
            $('#div1').animate({
                opacity:0.9,
                height:600
            },2000)
            .animate({
                left:'+=300'
            },2000)
            .animate({
                opacity:0.5,
                height:300
            },2000)
            .animate({
                left:'-=300'
            },2000)
            .animate({
                opacity:1,
                height:100
            },2000, function() {
                runIt();
            });
        }
        runIt();
    });
</script>

</body>
</html>

通过上述示例，我们可以深入掌握在jQuery中如何使用动画效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery三组基本动画与自定义动画操作实例总结 - Python技术站

jQuery三组基本动画与自定义动画操作实例总结

一、基本动画

二、动画操作

相关文章