jQuery动态效果实例

Posted 帝景金岸

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery动态效果实例相关的知识,希望对你有一定的参考价值。

jQuery常见的动态效果:

隐藏/显示效果:

     1.(1):隐藏,显示:通过 jQuery,使用 hide() 和 show() 方法可以用来隐藏和显示 html 元素。

         (2):隐藏/显示的速度:

            语法:

                  

                  $(selector).hide(speed, callback);

                  

                  $(selector).show(speed, callback);

                   

            speed 参数规定隐藏/显示的速度;callback 参数是隐藏或显示完成后所执行的函数名称。如:$("p").hide(1000) 隐藏内容的速           度。

     2.使用 toggle() 方法可以用来切换 hide() 和 show() 方法。如:$("p").toggle()。

淡入淡出效果:

    1.jQuery fadeIn() 用于淡入已隐藏的元素。

       语法:$("#div1").fadeIn();

               $("#div2").fadeIn("slow");

               $("#div3").fadeIn(3000);

      

       点击之后:

      

 

    2.jQuery fadeOut() 方法用于淡出可见元素。语法如1;

 

    3.jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。语法如1;

 

      如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。

 

      如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。

   4.jQuery fadeTo() 方法允许渐变为给定的不透明度

       语法:$("#div1").fadeTo("slow",0.15);
               $("#div2").fadeTo("slow",0.4);
               $("#div3").fadeTo("slow",0.7);

滑动效果:

          1.jQuery slideDown() 方法用于向下滑动元素。

            语法:$("#panel").slideDown();

          2.jQuery slideUp() 方法用于向上滑动元素。

            语法:$("#panel").slideUp();

         3.jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

            如果元素向下滑动,则 slideToggle() 可向上滑动它们。

            如果元素向上滑动,则 slideToggle() 可向下滑动它们。

            语法:$(".panel").slideToggle("slow");

动画:

       1.jQuery animate() 方法用于创建自定义动画。

          语法:$("div").animate({left:\'250px\'});

       生成动画的过程中可同时使用多个属性:

          如:

              $("div").animate({
              left:\'250px\',
              opacity:\'0.5\',
              height:\'150px\',
              width:\'150px\',

              height:\'toggle\'

              });

             var div=$("div");

             div.animate({height:\'300px\',opacity:\'0.4\'},"slow");
             div.animate({width:\'300px\',opacity:\'0.8\'},"slow");

           

            点击开始:

            

 

停止动画:

          1.jQuery stop() 方法用于停止动画或效果,在它们完成之前。

            stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。

           语法:$("#panel").stop();

实现代码如下:

 

 

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
          $(document).ready(function(){
                 $("#hide").click(function(){
                        $("p").hide();   //隐藏
                    });
          $("#show").click(function(){
                        $("p").show();      //显示
                    });
            });
</script>
</head>
<body>
       <p id="p1">点击隐藏就隐藏咯,点击显示就显示咯</p>
       <button id="hide" type="button">隐藏</button>
       <button id="show" type="button">显示</button>
</body>
</html>

以上是关于jQuery动态效果实例的主要内容,如果未能解决你的问题,请参考以下文章

jquery animate方法动画效果没有

jquery 动态添加tab 效果

JQuery插件制作具有动态效果的网页

jquery动态绑定hover没有效果

jQuery的DOM操作实例——拖拽效果&&拓展插件

jquery中的animate动态效果是如何通过Js实现的?