简单介绍jQuery的显示和隐藏,margin都以动画形式

作者:mgm娱乐

slideToggle(speed,[easing],[callback])

一、 显示与隐藏——hide(),show()

1. 方法:

  • hide(speed,[callback]);
  • show(speed,[callback]);

     说明:这两个方法还可以实现带动画效果的显示隐藏。speed可以是“slow"(600毫秒)、"normal"(400毫秒)、"fast"(200毫秒),可以直接是毫秒数。

      callback是动画执行完的回调函数。

2.实例:

mgm集团4688 1mgm集团4688 2

<style type="text/css">
    body {
        font-size: 13px;
    }

    .artFram {
        border: solid 1px #ccc;
        background-color: #eee;
        width: 260px;
        padding: 8px;
        word-break: break-all;
    }

    .artList {
        line-height: 1.8em;
    }
</style>
<div class="artFram">
      <div class="artList">
           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
           jQuery
           --write less,do more.
           &nbsp;<a href="javascript:void(0)">显示</a>
      </div>
</div>

html

<script type="text/javascript">
        $(function () {
            var $link = $(".artList a");
            var $hide = $(".artList :eq(2)");
            $link.click(function () {
                if ($(this).html() == "显示") {
                    $(this).html("隐藏");
                    $hide.show(1000,function(){alert("显示")});
                } else {
                    $(this).html("显示");
                    $hide.hide(800, function () { alert("隐藏")});
                }
            })
        });
    </script>

 

fadeToggle(speed,[easing],[callback])

mgm集团4688 ,二、切换显示隐藏——toggle()

1. 方法

  • toggle():无参数,直接切换显示隐藏状态;
  • toggle(switch):switch是布尔值,true显示元素,false隐藏元素。
  • toggle(speed,[callback]):speed为切换速度;callback为动画效果执行之后的回调函数。

说明:当以动画效果展示时,元素的width,height,padding,margin都以动画形式展示。

2. 实例:

mgm集团4688 3mgm集团4688 4

<div class="divFrame">
     <div class="divMenu">
          <input id="Button1" type="button" value="无参数"/><br />
          <input id="Button2" type="button" value="逻辑显示" /><br />
          <input id="Button3" type="button" value="动画显示"/>
     </div>
     <div class="divContent">
          <img src="Images/img03.jpg" alt="mgm集团4688 5" />
     </div>
</div>

html

<script type="text/javascript">
        var isShow = false;
        var title = $(".divTitle");
        var content = $(".divContent");

        $(function () {
            title.click(function () {
                if (isShow) {
                    $("img").slideUp("normal", function () {
                        $("#divTip").html("关闭成功");
                        isShow = false;
                    });
                } else {
                    $("img").slideDown("normal");
                    $("#divTip").html("");
                    isShow = true;
                }
            });
        });
    </script>
<style>
            div {
                background-color: #FFFF00;
                height: 40px;
                width: 80px;
                border: 1px solid #000000;
                margin-top: 5px;
                padding: 5px;
                text-align: center;
                position: absolute;
            }
        </style>
        <script type="text/javascript">
            $(function() {
                $("button:first").click(function() {
                    $("#block").animate({
                        left: "-=80px" //相对左移
                    }, 300);
                });
                $("button:last").click(function() {
                    $("#block").animate({
                        left: "+=80px" //相对右移
                    }, 300);
                });
            });
        </script>
        <button >Go>></button>
        <button >Go>></button>
        <div id="block">动画!</div>

hide,fadeOut,slideDown()

四、淡入淡出——fade

1. 淡入淡出方法

  • fadeIn(speed,[callback]):淡入,透明度由0.0到1.0;
  • fadeOut(speed,[callback]):淡出,透明度由1.0到0.0;

实例:

mgm集团4688 6mgm集团4688 7

<div class="divFrame">
       <div class="divTitle">
           <input id="Button1" type="button" value="fadeIn" class="btn" />
           <input id="Button2" type="button" value="fadeOut" class="btn" />
       </div>
       <div class="divContent">
           <div class="divTip"></div>
           <img src="Images/img05.jpg" alt="mgm集团4688 8" title="风景图片" style="display:none;" />
       </div>
  </div>

html

<script type="text/javascript">
        $(function () {
            $img = $("img"); //图片元素对象
            $tip = $(".divTip"); //提示元素对象
            $("#Button1").click(function () { //第一个按钮单击事件
                $tip.html(""); //清空提示内容
                //在2000毫秒中淡入图片,并执行一个回调函数
                $img.fadeIn(2000, function () {
                    $tip.html("淡入成功!");
                })
            })
            $("#Button2").click(function () { //第二个按钮单击事件
                $tip.html(""); //清空提示内容
                //在2000毫秒中淡出图片,并执行一个回调函数
                $img.fadeOut(2000, function () {
                    $tip.html("淡出成功!");
                })
            })
        })
    </script>

2. fadeTo(speed,opacity,[callback]):以动画效果将透明度设置为一个指定值,还可以设置回调函数。

实例:

mgm集团4688 9mgm集团4688 10

<input type="button" id="btn" value="click" />
        <div class="divContent">
            <img src="Images/img06.jpg" alt="mgm集团4688 11" title="风景图片" />
        </div>

html

<script type="text/javascript">
        $(function () {
            var opacity = 0.0;
            $("#btn").click(function () {
                if (opacity >= 1.0) {
                    opacity = 0.0;
                } else {
                    opacity += opacity + 0.2;
                }
                $("img").fadeTo("normal", opacity);
            });
        });
    </script>

例子和第一个例子相同,只是对hide()和show()增加了时间参数。其实toogle()也可以加入事件参数。

3、交互动画方法:

五、自定义动画——animate

1.方法 :

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

说明:param表示要调整的属性键值对,duration表示速度,easing表示动画插件,callback表示动画效果完成后的回调效果。

注意:

params的属性名要使用骆驼写法,例如font-size要写成fontSize。

如果想以动画形式移动元素位置,则position必须设置为relative或者absolute。

队列动画:在元素中执行一个或者多个animate方法。

 

如果有个人见解的大侠可以留言,恳请指导。。谢谢~~

三、滑动效果——slide

  • slideUp(speed,[callback]):向上滑动,减小元素高度至0
  • slideDow(speed,[callback]):向下滑动,增大元素高度。
  • slideToggle(speed,[callback]):以动画效果切换元素高度。
<script type="text/javascript">
            $(function() {
                $("input:eq(0)").click(function() {
                    $("div").add("img").slideUp(1000);
                });
                $("input:eq(1)").click(function() {
                    $("div").add("img").slideDown(1000);
                });
                $("input:eq(2)").click(function() {
                    $("div").add("img").hide(1000);
                });
                $("input:eq(3)").click(function() {
                    $("div").add("img").show(1000);
                });
            });
        </script>  
    <input type="button" value="SlideUp">
    <input type="button" value="SlideDown">
    <input type="button" value="Hide">
    <input type="button" value="Show"><br>
    <div></div><img src="04.jpg">

2、自定义动画方法:

<script type="text/javascript">
            $(function() {
                $("input:eq(0)").click(function() {
                    $("img").fadeOut(1000);
                });
                $("input:eq(1)").click(function() {
                    $("img").fadeIn(1000);
                });
                $("input:eq(2)").click(function() {
                    $("img").fadeTo(1000, 0.5);
                });
                $("input:eq(3)").click(function() {
                    $("img").fadeTo(1000, 0);
                });
            });
        </script>
            <p><img src="03.jpg"></p>
<input type="button" value="FadeOut">
<input type="button" value="FadeIn">
<input type="button" value="FadeTo 0.5">
<input type="button" value="FadeTo 0">

参数说明:params指一个包含样式属性及值的映射;speed指速度参数,可选的;callback指在动画完成时执行的函数

animate()方法还有另外一种形式,如下所示:

有朋友经常问我jQuery实现动画的一些方法,老是喜欢去翻书或者查看那手册,为了方便把所有动画方法列举出来如下:

对于动画来说,显示和隐藏是最基本的效果之一,简单介绍jQuery的显示和隐藏。

fadeTo(speed,opacity,[callback])

            fadeIn(duration, [callback]);
            fadeOut(duration, [callback]);
例子

1、基本动画方法:

fadeOut相关参数

animate()方法,其语法结构为:animate(params,speed,callback);

以上两个div块同时运用了三个动画效果,其中第一个div快的第一个动画添加了queue:false参数,使得前两项两个动画同时执行。

除非设置了 speed 参数,否则不能设置该参数。

3.使用fadeIn()和fadeOut()方式

 以上是对hide()和show()函数的测试。

1.显示和隐藏hide()和show()

本文由mgm娱乐发布,转载请注明来源

关键词: