jQuery学习笔记（4）——动画效果

最新推荐文章于 2019-10-23 20:49:54 发布

liuyueyi1995

最新推荐文章于 2019-10-23 20:49:54 发布

阅读量516

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/liuyueyi1995/article/details/52558084

版权

jQuery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

jQuery动画效果

jQuery提供了较为丰富和简单的动画效果，但是效果是为了可用性服务的，如果简单的堆砌效果，往往适得其反。

jQuery的动画效果：

隐藏/显示
淡入/淡出
滑动
自定义动画

显示和隐藏

实际案例

可折叠的列表

<body>
    <fieldset>
        <legend>可折叠列表</legend>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3
                <ul>
                    <li>3.1</li>
                    <li>3.2
                        <ul>
                            <li>3.2.1</li>
                            <li>3.2.2</li>
                        </ul>
                    </li>
                    <li>3.3</li>
                </ul>
            </li>
            <li>4
                <ul>
                    <li>4.1</li>
                    <li>4.2
                        <ul>
                            <li>4.2.1</li>
                            <li>4.2.2</li>
                        </ul>
                    </li>
                    <li>4.3</li>
                </ul>
            </li>
            <li>5</li>
        </ul>
    </fieldset>
</body>

实际效果

这样的效果显然不是友好的，当层次变深，条目变多，完全展开的列表会让用户找不到有用信息。所以用jQuery让子列表隐藏，当点击展开的时候再显示出来。
可以用如下方法实现：

$(function(){
    $('li:has(ul)').click(function(event){
        if(this == event.target){
            if($(this).children().is(':hidden')){
                $(this).css('list-style-image','url(minus.gif)').children().show();
            }else{
                $(this).css('list-style-image','url(plus.gif)').children().hide();
            }
        }
        return false;
    }).css('cursor','pointer').click();
    $('li:not(:has(ul))'),css({
        cursor:'default','list-style-image':'none'
    });
});

切换元素的显示状态

toggle()命令可以在显示、隐藏两个状态中切换。
还是之前的例子，这次用toggle()来实现：

$(function(){
    $('li:has(ul)').click(function(event){
        if(this == event.target){
            $(this).children().toggle();
            $(this).css('list-style-image',($(this).children().is(':hidden'))?'url(plus.gif)':'url(minus.gif)');
        }
        return false;
    }).css('cursor','pointer').click();
    $('li:not(:has(ul))'),css({
        cursor:'default','list-style-image':'none'
    });
});

动画方式显示和隐藏

show()和hide()其实是有参数的。

hide(speed,callback)
使包装集里的元素变为隐藏状态。不带参数时，隐藏效果为突然发生。
如果提供speed参数，就可以调整元素的大小和不透明度，使得元素在短时内逐渐隐藏，完全隐藏之后再把元素的display样式属性值设置为none。speed可以是毫秒数、slow、normal、fast。
callback是可选的回调函数，用来完成动画结束之后的事情。这个函数的上下文被设置为以动画方式隐藏的元素。

show(speed,callback)
和hide()类似，只不过是把display的值改为inline或block。

toggle(speed,callback)
同上

加入动画之后，原解决方法需要调整，因为在页面加载好之后，该隐藏的部分不应该再展现出来，如果只单纯的在toggle()中加入参数，那么用户会在加载完成之后，看见该隐藏的部分渐渐的消失。所以需要显式的调用hide()将子列表隐藏起来。

$(function(){
    $('li').css('pointer','default').css('list-style-image','none');
    $('li:has(ul)').click(function(event){
        if(this == event.target){
            $(this).children().toggle('slow');
            $(this).css('list-style-image',($(this).children().is(':hidden'))?'url(plus.gif)':'url(minus.gif)');
        }
        return false;
    }).css({cursor:'pointer','list-style-image':'url(plus.gif)'}).children().hide();
    $('li:not(:has(ul))'),css({
        cursor:'default','list-style-image':'none'
    });
});

淡入和淡出

滑动

停止动画

有时候需要停止一段已经开始的动画。
stop()，停止当前正在运行的、包装集里的元素的所有动画，这个命令没有参数。

自定义动画

实际案例

坠落动画

$('.myAnimate').each(function(){
    $(this)
        .css('position','relative')
        .animate(
        {
            opacity:0,
            top:$(windows).height() - $(this).height() - $(this).position().top
        },
        'slow',
        function(){$(this).hide();});
});

top的计算是利用了Dimensions插件的position()命令以便确定相对于页面的元素的初始位置。

消散动画

$('.myAnimate').each(function(){
    var position = $(this).position();
    $(this)
        .css({
            position:'absolute',
            top:position.top,
            left:position.left
        })
        .animate(
        {
            opacity:'hide',
            width:$(this).width()*5,
            height:$(this).height()*5,
            top:position.top - ($(this).height()*5/2),
            left:position.left - ($(this).width()*5/2)
        },
        'normal');
});

liuyueyi1995

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习笔记（4）——动画效果

jQuery动画效果jQuery提供了较为丰富和简单的动画效果，但是效果是为了可用性服务的，如果简单的堆砌效果，往往适得其反。jQuery的动画效果：隐藏/显示淡入/淡出滑动自定义动画显示和隐藏相关命令show()用于显示包装集里的元素 hide()用于隐藏包装集里的元素原理是修改style属性的display值，none表示隐藏。实际使用中，在初始化的时候，不要利用元素的sty
复制链接

扫一扫