zoukankan      html  css  js  c++  java
  • 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',
                  '150px',

                  height:'toggle'

                  });

                 var div=$("div");

                 div.animate({height:'300px',opacity:'0.4'},"slow");
                 div.animate({'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>

  • 相关阅读:
    省常中模拟 Test4
    省常中模拟 Test3 Day1
    省常中模拟 Test3 Day2
    省常中模拟 Test1 Day1
    树型动态规划练习总结
    noip2010提高组题解
    noip2003提高组题解
    noip2009提高组题解
    noip2004提高组题解
    noip2002提高组题解
  • 原文地址:https://www.cnblogs.com/WaJC2017/p/6032977.html
Copyright © 2011-2022 走看看