10分钟-jQuery动画特效

1.show()和hide()方法显示和隐藏元素

1.show()和hide()方法用于显示或隐藏页面中的元素,它的调用格式分别为:

$(selector).hide(speed,[callback])和$(selector).show(speed,[callback])

参数speed设置隐藏或显示时的速度值,可为“slow”、“fast”或毫秒数值,可选项参数callback为隐藏或显示动作执行完成后调用的函数名。

例:调用show()或hide()方法显示或隐藏正文:

div
{
    margin: 10px 0px;
    border: solid 1px #ccc;
    width: 280px;
}
ul
{
    list-style-type: none;
    padding: 5px;
    margin: 0px;
    display: none;
}
li
{
    margin: 3px;
}
h4
{
    background-color: #eee;
    padding: 5px;
    margin: 0px;
}
 <h3>使用show()和hide()方法显示和隐藏元素</h3>
        <div>
            <h4>我喜欢吃的水果</h4>
            <ul>
                <li>苹果</li>
                <li>甘桔</li>
                <li>梨</li>
            </ul>
            <input id="hidval" type="hidden" value="0"/>
        </div>

        <script type="text/javascript">
            $(function () {
                $("h4").bind("click", function () {
                    if ($("#hidval").val() == 0) {
                        $("ul").show();
                        $("#hidval").val(1);
                    } else {
                        $("ul").hide();
                        $("#hidval").val(0);
                    }
                });
            });
        </script>

2.动画

在上面,调用show()和hide()方法仅是实现的元素的显示和隐藏功能,如果在这些方法中增加“speed”参数可以实现动画效果的显示与隐藏,同时,如果添加了方法的回调函数,它将在显示或隐藏执行成功后被调用。

例:同上面,加上动画:

        <script type="text/javascript">
            $(function () {
                $("h4").bind("click", function () {
                    if ($("#hidval").val() == 0) {
                        $("ul").show(1000,function(){
                            $("#hidval").val(1);
                        })
                    } else {
                        $("ul").hide(1000,function(){
                            $("#hidval").val(0);
                        })
                    }
                })
            });
        </script>

,可以看到慢慢下拉。

2..toggle()方法实现动画切换效果

上面我们学过实现元素的显示与隐藏需要使用hide()与show(),那么有没有更简便的方法来实现同样的动画效果呢?

调用toggle()方法就可以很容易做到,即如果元素处于显示状态,调用该方法则隐藏该元素,反之,则显示该元素,它的调用格式是:

$(selector).toggle(speed,[callback])

其中speed参数为动画效果时的速度值,可以为数字,单位为毫秒,也可是“fast”、“slow”字符,可选项参数callback为方法执行成功后回调的函数名称。

例:调用toggle()方法实现“内容”部分的动画显示和隐藏之间的切换:

 <h3>toggle()方法的动画切换效果</h3>
        <div>
            <h4>
               <span class="fl">我喜欢吃的水果</span>
               <span class="fr" id="spnTip">显示</span>
            </h4>
            <ul>
                <li>苹果</li>
                <li>甘桔</li>
                <li>梨</li>
            </ul>
        </div>

        <script type="text/javascript">
            $(function () {
                var $spn = $("#spnTip");
                $("h4").bind("click", function () {
                    $("ul").toggle(1000,function(){
                     $spn.html() == "隐藏" ? $spn.html("显示") : $spn.html("隐藏");
                    })
                });
            });
        </script>
div
{
    margin: 10px 0px;
    border: solid 1px #ccc;
    width: 280px;
}
ul
{
    list-style-type: none;
    padding: 5px;
    margin: 0px;
    display: none;
}
li
{
    margin: 3px;
}
h4
{
    background-color: #eee;
    padding: 5px;
    margin: 0px;
    height: 23px;
    line-height: 23px;
}
.fl
{
    float: left;
}
.fr
{
    float: right;
}

3.使用slideUp()和slideDown()方法的滑动效果

可以使用slideUp()和slideDown()方法在页面中滑动元素,前者用于向上滑动元素,后者用于向下滑动元素,它们的调用方法分别为:

$(selector).slideUp(speed,[callback])和$(selector).slideDown(speed,[callback])

其中speed参数为滑动时的速度,单位是毫秒,可选项参数callback为滑动成功后执行的回调函数名。

要注意的是:slideDown()仅适用于被隐藏的元素;slideup()则相反。

例:分别调用slideUp()和slideDown()方法实现指定“内容”元素的滑动显示效果:

 <h3>使用slideUp()和slideDown()方法的滑动效果</h3>
        <div>
            <h4>我喜欢吃的水果</h4>
            <ul>
                <li>苹果</li>
                <li>甘桔</li>
                <li>梨</li>
            </ul>
            <input id="hidval" type="hidden" value="0"/>
        </div>

        <script type="text/javascript">
            $(function () {
                $("h4").bind("click", function () {
                    if ($("#hidval").val() == 0) {
                        $("ul").slideUp(1000,function() {
                            $("#hidval").val(1);
                        })
                    } else {
                        $("ul").slideDown(1000,function(){
                            $("#hidval").val(0);
                        })
                    }
                })
            });
        </script>

4.使用slideToggle()方法实现图片“变脸”效果

使用slideToggle()方法可以切换slideUp()和slideDown(),即调用该方法时,如果元素已向上滑动,则元素自动向下滑动,反之,则元素自动向上滑动,格式为:

$(selector).slideToggle(speed,[callback])

其中speed参数为动画效果时的速度值,可以为数字,单位为毫秒,也可是“fast”、“slow”字符,可选项参数callback为方法执行成功后回调的函数名称。

例:调用slideToggle()方法实现“内容”区的滑动切换:

 <div>
            <h4>
               <span class="fl">我喜欢吃的水果</span>
               <span class="fr" id="spnTip">向下滑</span></h4>
            <ul>
                <li>苹果</li>
                <li>甘桔</li>
                <li>梨</li>
            </ul>
            <input id="hidval" type="hidden" value="0"/>
        </div>

        <script type="text/javascript">
            $(function () {
                var $spn = $("#spnTip");
                $("h4").bind("click", function () {
                    $("ul").slideToggle(1000,function() {
               $spn.html() == "向下滑" ? $spn.html("向上滑") : $spn.html("向下滑");
                    })
                })
            });
        </script>

5.使用fadeIn()与fadeOut()方法实现淡入淡出效果

fadeIn()和fadeOut()方法可以实现元素的淡入淡出效果,前者淡入隐藏的元素,后者可以淡出可见的元素,它们的调用格式分别为:

$(selector).fadeIn(speed,[callback])和
$(selector).fadeOut(speed,[callback])

其中参数speed为淡入淡出的速度,callback参数为完成后执行的回调函数名。

例:调用fadeIn()和fadeOut()方法实现“标题”下“内容”元素的淡入淡出效果:

<script type="text/javascript">
            $(function () {
                $("h4").bind("click", function () {
                    if ($("#hidval").val() == 0) {
                        $("ul").fadeIn(1000,function() {
                            $("#hidval").val(1);
                        })
                    } else {
                        $("ul").fadeOut(1000,function(){
                            $("#hidval").val(0);
                        })
                    }
                })
            });
        </script>

6.使用fadeTo()方法设置淡入淡出效果的不透明度

调用fadeTo()方法,可以将所选择元素的不透明度以淡入淡出的效果调整为指定的值,该方法的调用格式为:

$(selector).fadeTo(speed,opacity,[callback])

其中speed参数为效果的速度,opacity参数为指定的不透明值,它的取值范围是0.0~1.0,可选项参数callback为效果完成后,回调的函数名。

例:调用fadeTo()方法分别设置三个<span>元素的不透明度:

<h3>使用fadeTo()方法设置淡入淡出效果的不透明度</h3>
        <span class="red"></span><span class="red"></span><span class="red"></span>

        <script type="text/javascript">
            $(function () {
                $("span").each(function (index) {
                    switch (index) {
                        case 0:
                            $(this).fadeTo(1000,0.2);
                            break;
                        case 1:
                            $(this).fadeTo(1000,0.4);
                            break;
                        case 2:
                            $(this).fadeTo(1000,0.6);
                            break;
                    }
                });
            });
        </script>
span
{
    width: 70px;
    height: 70px;
    float: left;
    border: solid 1px #ccc;
    margin: 0px 8px;
}
.red
{
    background-color: Red;
}

7.调用animate()方法制作简单的动画效果

调用animate()方法可以创建自定义动画效果,它的调用格式为:

$(selector).animate({params},speed,[callback])

其中,params参数为制作动画效果的CSS属性名与值,speed参数为动画的效果的速度,单位为毫秒,可选项callback参数为动画完成时执行的回调函数名。

例:调用animate()方法制作一个渐渐放大的正方体:

<span></span>
        <div id="tip"></div>

        <script type="text/javascript">
            $(function () {
                $("span").animate({
                    width: "80px",
                    height: "80px"
                },
                3000, function () {
                    $("#tip").html("执行完成!");
                });
            });
        </script>

8.调用animate()方法制作移动位置的动画

调用animate()方法不仅可以制作简单渐渐变大的动画效果,而且还能制作移动位置的动画,在移动位置之前,必须将被移元素的“position”属性值设为“absolute”或“relative”,否则,该元素移动不了。

例:调用animate()方法移动并放大<span>元素:

 <span></span>
        <div id="tip"></div>

        <script type="text/javascript">
            $(function () {
                $("span").animate({
                    left: "+=100px"
                }, 3000, function () {
                    $(this).animate({
                        height: ‘+=30px‘,
                        width: ‘+=30px‘
                    }, 3000, function () {
                        $("#tip").html("执行完成!");
                    });
                });
            });
        </script>

9.调用stop()方法停止当前所有动画效果

stop()方法的功能是在动画完成之前,停止当前正在执行的动画效果,这些效果包括滑动、淡入淡出和自定义的动画,它的调用格式为:

$(selector).stop([clearQueue],[goToEnd])

其中,两个可选项参数clearQueue和goToEnd都是布尔类型值,前者表示是否停止正在执行的动画,后者表示是否完成正在执行的动画,默认为false。

例:调用stop()方法停止正在执行的动画:

<span></span>
        <input id="btnStop" type="button" value="停止" />
        <div id="tip"></div>

        <script type="text/javascript">
            $(function () {
                $("span").animate({
                    left: "+=100px"
                }, 3000, function () {
                    $(this).animate({
                        height: ‘+=60px‘,
                        width: ‘+=60px‘
                    }, 3000, function () {
                        $("#tip").html("执行完成!");
                    });
                });
                $("#btnStop").bind("click", function () {
                   $("span").stop();
                    $("#tip").html("执行停止!");
                });
            });
        </script>

10.调用delay()方法延时执行动画效果

delay()方法的功能是设置一个延时值来推迟动画效果的执行,它的调用格式为:

$(selector).delay(duration)

其中参数duration为延时值,它的单位是毫秒,当超过延时值时,动画继续执行。

例:调用delay()方法延时正在执行的动画:

<span></span>
        <input id="btnStop" type="button" value="延时" />
        <div id="tip"></div>

        <script type="text/javascript">
            $(function () {
                $("span").animate({
                    left: "+=100px"
                }, 3000, function () {
                    $(this).animate({
                        height: ‘+=60px‘,
                        width: ‘+=60px‘
                    }, 3000, function () {
                        $("#tip").html("执行完成!");
                    });
                });
                $("#btnStop").bind("click", function () {
                    $("span").delay(3000);
                    $("#tip").html("正在延时!");
                });
            })
        </script>

时间: 2024-10-02 03:42:07

10分钟-jQuery动画特效的相关文章

有时候就是看不进论文-jQuery动画特效篇&amp;MySQL

hi 早上知道新的乱斗模式后,没忍住开了几把,然后就无心论文了...用这个来破吧 1.jQuery -----动画特效----- ----调用show()和hide()方法显示和隐藏元素 show()和hide()方法用于显示或隐藏页面中的元素,它的调用格式分别为: $(selector).hide(speed,[callback])和$(selector).show(speed,[callback]) 参数speed设置隐藏或显示时的速度值,可为“slow”.“fast”或毫秒数值,可选项参数

jQuery动画特效实例教程

本文以实例形式详细讲述了jQuery动画特效的实现方法. 1.自制折叠内容块 内容块如下:   <div class="module">   <div class="caption">     <span>标题</span>     <img src="rollup.gif" alt="rollup" title="rolls up this module&quo

基于Animate.css的jQuery动画特效插件

janimate是一款非常实用的基于Animate.css的jQuery动画特效插件.该动画特效插件允许你在jQuery代码中操纵Animate.css的66种动画效果.通过该插件可以简化Animate.css的使用,非常方便. 使用这个插件可以通过jQuery选择器来选择你想要进行动画的元素,然后调用jAnimate()或jAnimateOnce()方法,并传入你想要执行动画效果的名称即可. 效果演示:http://www.htmleaf.com/Demo/201504121666.html

10分钟-jQuery过滤选择器

1.:first过滤选择器 本次我们介绍过滤选择器,该类型的选择器是根据某过滤规则进行元素的匹配,书写时以":"号开头,通常用于查找集合元素中的某一位置的单个元素. 在jQuery中,如果想得到一组相同标签元素中的第1个元素该怎样做呢? 在下面的示例代码中你可能注意到我们会使用 $("li:first") 注意:书写时以":"号开头. 例子:鉴于:first和:last功能相近,使用:last给最后的li标签文字添加红色: <div>

10分钟-jQuery操作DOM元素

1.使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,attr(属性名,属性值)格式则是设置元素属性名的值. 例:调用attr()方法设置并获取<a>元素中 "href"属性的值: <h3>attr()方法设置元素属性</h3> <a href="http://127.0.0.1" id="a1">点我就变</a

jQuery动画特效

1.调用show()和hide()方法显示和隐藏元素,toggle切换,之前已经有博文细讲了. $(selector).hide(speed,[callback]); $(selector).show(speed,[callback]); //参数speed设置隐藏或显示时的速度值,可为"slow"."fast"或毫秒数值,可选项参数callback为隐藏或显示动作执行完成后调用的函数名. 2.slideUp()和slideDown()方法的滑动效果 比如配合cli

jQuery动画效果实现

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>jQuery动画特效</title> 6 <script src="http://libs.baidu.com/jquery/1.9.0/jquer

10款基于jquery的web前端动画特效

1.jQuery横向手风琴图片切换动画 之前我们为大家分享过很多款基于jQuery和CSS3的手风琴菜单和手风琴焦点图插件,比如CSS3响应式垂直手风琴菜单和jQuery横向手风琴图片展示插件.今天要介绍的也是一款基于jQuery的横向手风琴图片切换动画,鼠标滑过图片时即可展开,并且图片上方有文字标题,非常实用. 在线演示 源码下载 2.jQuery/CSS3渐变颜色拾取器 之前我们向大家分享过一款功能十分强大的jQuery颜色拾取器,支持透明度的选取.今天要为大家介绍的同样是一款基于jQuer

10款让人惊叹的HTML5/jQuery图片动画特效

1.HTML5相册照片浏览器 可连接Flickr照片服务 以前我们经常会分享一些jQuery相册浏览插件,效果不错,实用性也很强.不过如果能利用HTML5来实现相册浏览器,那么相册浏览效果肯定会更加炫酷.今天分享的这款HTML5相册浏览器可以连接到Flickr获取照片,也可以连接到youtube获取视频,照片在初始化的时候有波浪般的效果. 在线演示 源码下载 2.CSS3图片模糊效果 今天我们来分享一款利用CSS3技术让图片模糊的效果,我们只需要将鼠标滑过图片,就可以让图片产生模糊的特效,利用C