jquery动画

原创 2018年01月24日 14:39:39

隐藏和显示

show() 、hide()

 setTimeout(function () {
            $('#box1').hide();
            setTimeout(function () {
                $('#box1').show()
            }, 2000)
        }, 2000)

以前的版本有bug show方法不管之前元素的display是什么都直接改为block 例如show之前是inline-block也会直接改成block
新版本就不存在这个问题了;

toggle()

 var $body = $(this).siblings('.body');
            //            if ($body.is(':hidden')) {
            //                $body.show();
            //            } else {
            //                $body.hide();
            //            }

            //            $(this).siblings('.body').toggle()

这俩种写法等价

通过传参来控制

  $(this).siblings('.body').toggle('fast')
            //            $(this).siblings('.body').toggle('slow', 'linear')
            //            $(this).siblings('.body').toggle('slow', function () {
            //                console.log('动画完成');
            //            })

fadeIn 、fadeOut 、fadeToggle
通过控制元素的透明度来达到显示和隐藏

$(this).siblings('.body').fadeToggle('slow', function () {
            //                console.log('动画完成');
            //            })

fadeTo
控制元素变化到想要的透明度

  $(this).siblings('.body').fadeTo('slow', 0.5, function () {
            //                console.log('动画完成');
            //            })

slideDown 、slideUp、sllideToggel
折叠效果

停止动画
stop(,)
两个参数 第一个为true 代表不仅立即停止当前动画 而且等待的其他动画也一并停止
第二个参数为true 代表直接到动画结果 而不是停止动画

finish
直接完成动画 不显示过程
这里写图片描述

jQuery.fx.off
设置为true会关闭整个页面上所有的动画

动画过渡效果
jQuery easing插件
这里写图片描述.

自定义动画
animate
这里写图片描述

animate还有一种传参情况
always 可以定义一个函数 不管动画是否完成 甚至终止 都会执行这个函数
complete 动画完成之后执行
done 和complete区别不大
duration 持续时间
easing 过渡效果
fail 动画执行失败后 执行
progress 代表每一步动画完成之后会调用这个函数
queue 代表是否在动画队列中放置动画 为false 表示立即开始 不会依次执行
start 动画开始后执行
step 一步一步调用 函数
*记住常用的就好 还有一点 这些参数不是animate专属的 之前的hide show toggle都支持这些参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        .panel {
            width: 300px;
            margin: 50px 0 0 50px;
            line-height: 1.8;
            text-align: center;
            font-size: 20px;
            color: #fff;
        }

        .title {
            background-color: #c7731f;
        }

        h1 {
            margin: 0;
            padding: 0;
        }

        .body {
            padding: 30px 10px;
            background-color: #5298c7;
        }
    </style>
</head>
<body>
<div class="panel">
    <div class="title">
        <!--<h1>唐诗一首</h1>-->
        <h1>aaaa</h1>
    </div>
    <div class="body">
        <!--<p>-->
        <!--白日依山尽,<br>-->
        <!--黄河入海流。<br>-->
        <!--欲穷千里目,<br>-->
        <!--更上一层楼。<br>-->
        <!--</p>-->
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet eveniet numquam odio recusandae totam.
            Aliquam amet eaque esse excepturi, incidunt ipsum nisi officiis praesentium quaerat quibusdam, reiciendis
            sit vel voluptatibus!
        </p>
    </div>
</div>
<script src="../../../vendor/jquery-1.12.4.js"></script>
<script src="../../../vendor/jquery.easing.js"></script>
<script>
    $(function () {

        $('.title').click(function () {

            //            $(this).siblings('.body').animate({
            //                //                width: 200,
            //                //                height: 500,
            //
            //                //                width: '-=100',
            //                //                height: '+=200',
            //
            //                width: '50%',
            //
            //            }, 3000, function () {
            //                console.log('动画结束');
            //            })

            //            $(this).siblings('.body').animate({
            //                width: 200,
            //                height: 500
            //            }, {
            //                always: function () {
            //                    console.log('always');
            //                },
            //                complete: function () {
            //                    console.log('complete');
            //                },
            //                step: function () {
            //                    console.log('step');
            //                },
            //                progress: function () {
            //                    console.log('progress');
            //                },
            //                start: function () {
            //                    console.log('start');
            //                },
            //                duration: 3000,
            //                easing: 'linear'
            //            })

            //            var $body = $(this).siblings('.body');
            //            $body.animate({
            //                width: $body.width() * 1.5,
            //                height: $body.height() * 1.5
            //            }, 3000, function () {
            //                console.log('动画结束');
            //            })


        });

    });

</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            margin: 200px 0 0 200px;
            border-radius: 10px;
            box-shadow: 0 0 20px #999;
            line-height: 300px;
            text-align: center;
            font-size: 50px;
            color: #fff;
        }

        #box1 {
            background-color: #5298c7;
        }
    </style>
</head>
<body>
<div id="box1" class="box"></div>

<script src="../../../vendor/jquery-1.12.4.js"></script>
<script>
    $(function () {

        $('#box1').click(function () {
            var $this = $(this);
            $this
                .css({
                    position: 'absolute',
                    top: $this.position().top,
                    left: $this.position().left
                })
            //                .animate({
            //                    opacity: 'hide',
            //                    width: $this.width() * 2,
            //                    height: $this.height() * 2,
            //                    top: $this.position().top - $this.height(),//达到一种从中心扩大的效果
            //                    left: $this.position().left - $this.width()
            //                }, 3000)
        })


    });

</script>
</body>
</html>

动画队列
.queue() 不仅限于动画
这里写图片描述

dequeue的方式将队列的第一项拿出来执行
但是这样一次次点击才执行很麻烦

有个参数 next

 $('#box1').queue('chain', function (next) {
        //            console.log('第1次');
        //            next();
        //        }).queue('chain', function (next) {
        //            console.log('第2次');
        //            next();
        //        }).queue('chain', function (next) {
        //            console.log('第3次');
        //            next();
        //        }).queue('chain', function (next) {
        //            console.log('第4次');
        //        })

这样只需要dequeue一次就可以依次往下执行

clearQueue 直接清空队列 不执行

 $('#box1').queue('chain', function (next) {
        //            console.log('第1次');
        //            next();
        //        }).queue('chain', function (next) {
        //            console.log('第2次');
        //            next();
        //        }).queue('chain', function (next) {
        //            console.log('第3次');
        //            next();
        //        }).queue('chain', function (next) {
        //            console.log('第4次');
        //        })

jquery动画jquery动画

  • 2011年07月08日 15:00
  • 1KB
  • 下载

jQuery实现图片左右出现和隐藏动画(腰封)

一定要引入jQuery,代码如下: .container{//整个容器的样式 display:block; position:fixed; z-inde...
  • wangweiscsdn
  • wangweiscsdn
  • 2017-01-03 16:57:03
  • 1024

jQuery动画-上卷和下拉

语法:$(selector).slideDown( [duration ] [, complete ] )
  • QQ80583600
  • QQ80583600
  • 2017-01-13 12:13:13
  • 1377

Jquery对象动画方法总结

注:中括号内为可选参数 1.show()和hide():元素显示和隐藏       $("#div1").show([3000],[function(){}]),显示元素,第一个参数表示持续时间,...
  • u010633077
  • u010633077
  • 2017-03-09 15:48:28
  • 182

jquery中的动画和事件

1.事件绑定    bind(type[,data],fn) type: blur,focus,  mouseover,mouseout等等 data可选的,作为event.data属性值传给事...
  • u014034934
  • u014034934
  • 2017-03-10 16:13:31
  • 286

jquery绑定事件与动画

绑定多个事件类型,示例代码如下: $
  • WYY19901103
  • WYY19901103
  • 2016-03-16 14:57:33
  • 722

jquery实现简单的轮播动画

css * { margin: 0; padding: 0; } u...
  • qq_17431235
  • qq_17431235
  • 2017-03-23 10:23:51
  • 386

jQuery动画入门--顺序执行

最近一年多一直在做前端的东西,由于老板在追求一些年轻动感的效果,让页面元素不能仅仅是简单的隐藏显示,所以经常会使用一些动画效果,发现jQuery的动画真心好用啊,把常用的几个总结一下,希望不再每次使用...
  • dragoo1
  • dragoo1
  • 2015-08-20 10:14:39
  • 5499

10款基于jquery实现的超酷动画源码

1.jQuery二级下拉菜单 下拉箭头翻转动画 之前我们分享过不少基于jQuery的二级下拉菜单,甚至是多级的下拉菜单,比如这款jQuery/CSS3飘带状多级下拉菜单就非常华丽。但今天要介绍的这款...
  • yanghaonan7758
  • yanghaonan7758
  • 2017-05-02 09:16:51
  • 217

jquery判断元素动画是否完成

$(".box").is(":animated")就这么简单的一句话,来一个demo var wait=setInterval(function(){                 if(!$(...
  • jinuxm
  • jinuxm
  • 2016-12-08 17:16:29
  • 2018
收藏助手
不良信息举报
您举报文章:jquery动画
举报原因:
原因补充:

(最多只允许输入30个字)