jQuery完结动画的主意列举-Web前端之家【奥门金沙手机娱乐网址】

有心上人平常问作者jQuery落成动画的后生可畏都部队分形式,老是向往去翻书大概查看那手册,为了便于把富有动漫方法列举出来如下:

生龙活虎、 呈现与潜伏——hide(卡塔尔(قطر‎,show(卡塔尔

1. 方法:

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

    
表达:那三个主意还是能完成推动漫作用的显得隐蔽。speed能够是“slow”(600皮秒卡塔尔国、”normal”(400皮秒State of Qatar、”fast”(200纳秒卡塔尔(قطر‎,能够一贯是微秒数。

      callback是动漫施行完的回调函数。

2.实例:

奥门金沙手机娱乐网址 1奥门金沙手机娱乐网址 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>

1.呈现和隐讳hide(卡塔尔(قطر‎和show(State of Qatar

1、基本动画方法:

二、切换显示隐蔽——toggle(卡塔尔(قطر‎

1. 方法

  • toggle(卡塔尔国:无参数,直接切换显示掩瞒状态;
  • toggle(switch卡塔尔国:switch是布尔值,true呈现成分,false隐蔽成分。
  • toggle(speed,[callback]卡塔尔(قطر‎:speed为切换速度;callback为动漫片效果试行之后的回调函数。

注明:当以卡通效果体现时,成分的width,height,padding,margin都是动漫格局显得。

2. 实例:

奥门金沙手机娱乐网址 3奥门金沙手机娱乐网址 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="奥门金沙手机娱乐网址 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>

对此动漫来讲,彰显和隐身是最中央的效率之后生可畏,简介jQuery的显得和隐形。

hide,fadeOut,slideDown()

三、滑动作效果果——slide

  • slideUp(speed,[callback]卡塔尔(قطر‎:向上海滑稽剧团动,减小成分中度至0
  • slideDow(speed,[callback]卡塔尔(قطر‎:向下滑动,增大成分中度。
  • slideToggle(speed,[callback]State of Qatar:以动漫效果切换到分中度。
<script type="text/javascript">
            $(function() {
                $("input:first").click(function() {
                    $("p").hide(); //隐藏
                });
                $("input:last").click(function() {
                    $("p").show(); //显示
                });
            });
        </script>
        <input type="button" value="Hide">
        <input type="button" value="Show">
        <p>点击按钮,看看效果</p>
        <div><em>本节主要降级和学习jQuery的自动显隐,渐入渐出、飞入飞出。自定义动画等。 1.显示和隐藏hide()和show() 对于动画来说,显示和隐藏是最基本的效果之一,本节简单介绍jQuery的显示和隐藏。</em>
        </div>

2、自定义动漫方法:

四、淡入淡出——fade

1. 淡入淡出方法

  • fadeIn(speed,[callback]卡塔尔(قطر‎:淡入,光滑度由0.0到1.0;
  • fadeOut(speed,[callback]卡塔尔(قطر‎:淡出,发光度由1.0到0.0;

实例:

奥门金沙手机娱乐网址 6奥门金沙手机娱乐网址 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="奥门金沙手机娱乐网址 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]卡塔尔(قطر‎:以卡通效果将发光度设置为一个内定值,还是能够安装回调函数。

实例:

奥门金沙手机娱乐网址 9奥门金沙手机娱乐网址 10

<input type="button" id="btn" value="click" />
        <div class="divContent">
            <img src="Images/img06.jpg" alt="奥门金沙手机娱乐网址 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(卡塔尔(قطر‎函数的测量试验。

animate(State of Qatar方法,其语法构造为:animate(params,speed,callback卡塔尔;

五、自定义动漫——animate

1.方法 :

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

表明:param表示要调动的性情键值对,duration表示速度,easing代表动漫插件,callback表示动漫效果完结后的回调效果。

注意:

params的习性名要使用骆驼写法,比方font-size要写成fontSize。

假如想以动漫格局活动成分地方,则position必需安装为relative大概absolute。

队列动漫:在要素中施行三个或许多个animate方法。

2.使用show()、hide()和toggle()方法

3、交互作用动漫方法:

上个例子对show(卡塔尔和hide(卡塔尔国方法做了简便介绍,其实那多少个主意能够肩负参数调节显隐敝进程。
语法如下

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

show(duration,[callback]);
hide(duration,[callback]);

fadeTo(speed,opacity,[callback])

里面,duration表示动漫实施时间的长度,能够表示速度的字符串,蕴含slow(0.6秒State of Qatar,normal(0.4秒卡塔尔,fast(0.2秒卡塔尔国.也足以是表示时间的寸头(纳秒卡塔尔。callback是可选的回调函数。在动漫完毕现在实践

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

<script type="text/javascript">
            $(function() {
                $("input:first").click(function() {
                    $("p").hide(300); //隐藏
                });
                $("input:last").click(function() {
                    $("p").show(500); //显示
                });
            });
        </script>

参数表明:params指二个含有样式属性及值的映射;speed指速度参数,可选的;callback指在动漫完毕时进行的函数

事例和率先个例子相符,只是对hide(卡塔尔和show(卡塔尔增添了光阴参数。其实toogle(卡塔尔(قطر‎也得以步入事件参数。

万风度翩翩有个人见解的铁汉能够留言,恳请指点。。感谢~~

只要平昔调用toogle(State of Qatar也足以兑现展现和潜伏

 $(function () {
            $("#mybtn").toggle(function () {
                $(".hidden").toggle();//获取到隐藏的将其显示
                $(this).attr("src", "image/up.jpg");
            }, function () {
                $(".hidden").toggle();//获取到显示的将其隐藏
                $(this).attr("src", "image/down.jpg");
            });
        });

 

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

对此动漫效果显隐,jQuery还提供了fadeIn(卡塔尔国个fadeOut(卡塔尔那五个实用的点子,他们的卡通片效果相近褪色,语法与show(卡塔尔和hide(State of Qatar完全形似。