码迷,mamicode.com
首页 > Web开发 > 详细

jQuery碎语(3) 动画特效

时间:2014-08-20 13:48:42      阅读:244      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   os   io   ar   2014   

5、动画特效

● 自制折叠内容块

内容块如下

    <div class="module">
        <div class="caption">
            <span>标题</span>
            <img src="rollup.gif" alt="rollup" title="rolls up this module"/>
        </div>
        <div class="body">
            近日,《体坛周报》记者马德兴在接受天津体育频道《体坛新视野》节目采访时表示自己对恒大[微博]的情况比较担忧,恒大统治力比上赛季下降了很多,恒大外援存在位置重叠的问题,客场不输给西悉尼流浪者就是一个可以接受的结果。该节目称恒大联赛3连胜胜之不武,恒大的惹不起不过尔尔,恒大失去了对其它球队压倒性的优势,能力下降是恒大霸主地位有所动摇的根源所在。
        </div>
    </div>

 

给img元素绑定点击事件。

        $(function() {
            $(‘div.caption img‘).click(function () {
                //先找到img的父级元素,再找该父级元素的子元素
                var $body = $(this).closest(‘div.module‘).find(‘div.body‘);
                if ($body.is(‘:hidden‘)) {
                    $body.show();
                } else {
                    $body.hide();
                }
            });
        });

bubuko.com,布布扣

 

切换元素的显示状态,还可以用toggle方法。

        $(function() {
            $(‘div.caption img‘).click(function () {
                $(this).closest(‘div.module‘).find(‘div.body‘).toggle();
            });
        });

 

以上是没有动画效果的,有时候感觉会很唐突。实际上,show,hide,toggle方法都可以有动画效果。比如:

        $(function() {
            $(‘div.caption img‘).click(function () {
                $(this).closest(‘div.module‘).find(‘div.body‘).toggle(‘slow‘);
            });
        });

 

又比如:

        $(function() {
            $(‘div.caption img‘).click(function () {
                $(this).closest(‘div.module‘).find(‘div.body‘).toggle(‘slow‘, function() {
                    $(this).closest(‘div.module‘).toggleClass(‘rolledup‘, $(this).is(‘:hidden‘))
                });
            });
        });    

 

● 使元素淡入淡出
fadeIn(speed, callback)       
fadeOut(speed, callback)
fadeTo(speed, opacity, callback)

 

● 上下滑动元素

slideDown(speed, callback)
slideUp(speed, callback)
slideToggle(speed, callback)

 

● 停止动画

stop(clearQueue, gotoEnd)

 

● 创建自定义动画

animate(properties, duration, easing, callback)

$(‘.classname‘).animate({opacity:‘toggle‘},‘slow‘)

 

如果写一个扩展函数。

$.fn.fadeToggle = function(speed){
    return this.animate({opacity:‘toggle‘},‘slow‘);
}

 

● 自定义缩放动画

$(‘.classname‘).each(function(){
    $(this).animate({
        width: $(this).width() * 2,
        height: $(this).height() * 2
    });
});

 

● 自定义掉落动画

$(‘.classname‘).each(function(){
    $(this)
        .css("position","relative")
        .animate({
            opacity: 0,
            top: $(window).height() - $(this).height() - $(this).position().top
        },‘slow‘,function(){ $(this).hide(); })
});

 

● 自定义消散动画

$(‘.classname‘).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‘);
});

 

● 队列中的动画

//动画插入队列
$(‘img‘).queue(‘chain‘, function(){});
$(‘img‘).queue(‘chain‘, function(){});
$(‘img‘).queue(‘chain‘, function(){});
$(‘img‘).queue(‘chain‘, function(){});

$(‘button‘).click(function(){
    $(‘img‘).dequeue(‘chain‘); //删除队列中的动画
})

cleaeQueue(name)//删除所有未执行的队列中的动画
delay(duration, name)//为队列中所有未执行的动画添加延迟

 

参考资料:jQuery实战(第二版)   

jQuery碎语(3) 动画特效,布布扣,bubuko.com

jQuery碎语(3) 动画特效

标签:style   blog   http   color   os   io   ar   2014   

原文地址:http://www.cnblogs.com/darrenji/p/3924322.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!