第五章----jquery的动画和特效

最新推荐文章于 2021-11-09 21:54:26 发布

南北北南

最新推荐文章于 2021-11-09 21:54:26 发布

阅读量197

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/c_lam_e/article/details/79010793

版权

jquery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

显示与隐藏

show()
hide()

<body>
   <div>
        <span id="span1">我要我的生命得到解放</span> 
        <span id="span2" style="display:none;">如今我已不在感到迷茫，我想要怒放的生命，就像伫立在彩虹之巅</span>    
        <input id="input1" type="button" value="显示"/>           
   </div>          
    <script>
         $(function(){
              $("#span").css("display","none");
              $("#input1").click(function(){
                    if($(this).val() == '显示'){
                         $("#span2").show();
                         $(this).val("隐藏");
                    }else{
                         $("#span2").hide();
                         $(this).val("显示");
                    }
              })
         });
    </script>
</body>

show(speed,[callback])
hide(speed,[callback])
speed，表示执行动画时的速度，默认有三个值，slow（0.6s）、normal（0.4s）、fast（0.2s），如果不使用默认值，也可以直接输入数字，代表毫秒数，show(3000)
```
在使用show()和hide()方法时，需要先对当前状态进行检测（显示或隐藏），有点麻烦，因此jquery还提供了一个函数toggle()        
```

toggle()

功能：切换当前元素的可见状态，显示时点击变为隐藏，隐藏时点击变为显示

toggle(switch)

switch,即开关状态，true----显示、false------隐藏

toggle(speed,[callback])

（同show(speed,[callback])）

 <div class="div1 csc">无参数</div>    
           <div class="div2 csc" >开关参数</div> 
           <div class="div3 csc">带速度的参数</div>    
           <script>
                $(function(){
                     $("#input2").click(function(){
                           $(".div1").toggle();
                           $(".div2").toggle(false);
                           $(".div3").toggle(2000, function(){
                           $(this).css("border","2px yellow solid")});
                     });
                });
           </script>

说明：无论是show()和hide()还是toggle()方法，当以动画效果切换页面元素可见状态时，其元素的width、height、padding、margin属性都将以动画的效果展示

滑动

slideUp(speed,[callback])

    功能：以动画的效果将所选择元素的高度向上减小，同样也是仅仅改变高度属性

slideDown(speed,[callback] )

功能：以动画的效果将所选择的元素的高度向下增大，使其呈现一种向下滑动的效果，而该元素的其他属性不发生变化

注意：无论是slideUp()还是slideDown()，其动画效果仅仅只是较小或增加元素的高度，如果元素有padding和margin值，这些属性也会以动画效果一起发生变化

slideToggle(speed,[callback] )

功能：根据当前元素的显示状态，自动进行切换。即以动画效果切换所选元素的高度，如果高，则减小，如果低，则增大

<body>                               
    <input id="input1" type="button" value="显示"/>
    <input id="input2" type="button" value="隐藏" />
    <input id="input3" type="button" value="toggle" />         
    <div class="csc"></div>    
<script>
    $(function(){
         $("#input1").bind("click",function(){
               $(".csc").slideUp(3000);
         })
         $("#input2").bind("click",function(){
               $(".csc").slideDown(3000);
         })
         $("#input3").bind("click",function(){
               $(".csc").slideToggle(3000);
         })
    });
      </script>
</body>

淡入淡出
与show()和hide()方法相比，fadeIn()和fadeOut()方法虽然也是为了切换元素的显示状态，但是后者并不修改元素的宽高属性，只是改变元素的透明度
fadeIn(speed,[callback])
功能：通过增加元素的透明度，实现淡入的效果（透明度1.0–>0.0）
fadeOut(speed,[callback])
功能：通过减小元素的透明度，实现淡出的效果（透明度0.0–>1.0）
fadeTo(speed,opacity,[callback])
功能：将所选择元素的不透明度一动画的效果调整到指定的不透明度值，动画完成时，可以执行一个回调函数

<body>                               
                <input id="input1" type="button" value="淡入"/>
                <input id="input2" type="button" value="淡出" />
                <input id="input3" type="button" value="toggle" />         
                <div class="csc"></div>    
     <script>
                $(function(){
                     $("#input1").bind("click",function(){
                           $(".csc").fadeIn(1000);
                     })
                     $("#input2").bind("click",function(){
                           $(".csc").fadeOut(1000);
                     })
                     $("#input3").bind("click",function(){
                           $(".csc").fadeTo(2000,0.5,change());
                     })
                     function change(){
                          $(".csc").css("background-color","yellow");
                     }
                });
           </script>
     </body>

自定义动画
上面几节介绍的都是元素局部属性发生变化，如高度、宽度、可见性等。在jquery中，也允许用户自定义动画效果，使用通过animate()方法，可以制作出效果更优雅，动作更复杂额页面动画效果。

animate(param,[duration],[easing],[callback])

param—-用于制作动画效果的属性样式和值的集合
可选项duration—–表示三种默认的速度字符，slow、fast、normal或者自定义的数字
可选项easing—-为动画插件使用，用于控制动画的表现效果，通常有linear、swing字符值
callback—-动画完成后，执行的回调函数

<body>                               
                <input id="input1" type="button" value="动画"/>                     
                <div class="csc"></div>    
     <script>
                $(function(){
                     $("#input1").bind("click",function(){
                          $(".csc").animate({width:"40%",height:"300px"},3000,change());
                     })                   
                     function change(){
                          $(".csc").css("background-color","yellow");
                     }
                });
           </script>
     </body>

移动位置的动画
通过animate()方法，不仅可以用动画效果增加元素的长与宽，还能以动画效果移动页面中的元素，即改变其相对位置，如：

$("#input2").bind("click",function(){
     $(".csc").animate({left:"40px",top:"100px"});
})

说明：在动画animate()中，第一个参数params在表示动画属性时，需要采用“驼峰命名法”，如果是font-size,必须写成“fontSize”才有效，否则报错。

$("#input2").bind("click",function(){
   $(".csc").animate({marginLeft:"+=40px"},3000); //向右移动40px
})

注意：要使页面中的元素以动画的效果移动，必须先将该元素的“position”属性设置成为“relative”或“absolute”，否则无法移动该元素。

队列中的动画
所谓队列中的动画，是指在元素中执行一个以上的多个动画效果，即有多个 animate()方法在元素中执行，因此，根据这些animate()方法执行的先后顺序，形成了动画队列产生队列后，动画的效果便按队列的顺序进行展示

     $("#input2").bind("click",function(){
                $(".csc").animate({marginLeft:"+=40px"},3000)  //向右移动40px
                          .animate({marginLeft: "-=30px"},"slow") //向左移动30px
                          .animate({marginTop: "+=40px"},"fast"); //向下移动40px
           })

动画停止和延时

在jquery()中，通过animate()可以实现元素的动画显示，但在显示过程中，执行动画时，可通过stop()方法停止或delay()方法延时某个动画的执行

* stop([clearQueue],[gotoEnd])

        功能：该方法的功能是停止正在执行的动画，其中可选参数【clearQueue】是一个布尔值，表示是否停止正在执行的动画，另外一个可选参数[gotoEnd]也是一个布尔值，表示是否立即完成正在执行的动画。

* delay(duration,[queueName])

        功能：该方法的功能是设置一个延时值来推迟后续队列中动画的执行，其中参数duration为延时的事件值，单位是毫秒。可选参数【queueName】表示队列名词，即动画队列

南北北南

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第五章----jquery的动画和特效

显示与隐藏show() hide()body> div> span id="span1">我要我的生命得到解放span> span id="span2" style="display:none;">如今我已不在感到迷茫，我想要怒放的生命，就像伫立在彩虹之巅span> input id="input1" type="b
复制链接

扫一扫

专栏目录