jQuery-动画 animate() hide() show() toggle() fadeT0() slideToggle()

弹出层：点击按钮出现弹出层，点击弹出层本身或者网页任意处弹出层消失。

注，点击按钮时要取消冒泡event.stopPrepagation();设置弹出层的位置$(event.target).offset().top+'px', $(event.target).offset.left+'px'

　　$('#divPop').show()显示弹出层。点击网页任意处关闭弹出层$(document).click(function(event){$('#divPop').hide()});

js：

$(function(){
    var speed=500;
    $('#btnShow').click(function(event){
        event.stopPropagation();
        var offset=$(event.target).offset();
                                   $("#divPop").css({top:offset.top+$(event.target).height()+'px',left:offset.left+'px'});
                $('#divPop').toggle(speed);
            });
            $(document).click(function(event){$('#divPop').hide(speed);});
            $('#divPop').click(function(event){$(this).hide(speed);});
        });

View Code

toggle()切换元素可见状态：$('#divPop').toggle();

slideDown(),slideUp(),slideToggle()将元素滑上滑下。$('#divPop').slideToggle();

html:

<body>
    <div>
        <br/><br/><br/>
        <button id='btnShow'>显示提示文字</button>
    </div>
    <div id='divPop' style="background-color:#f0f0f0; border:solid 1px #000;
        width:300px; height:100px; position:absolute; display:none;">
        <div style='text-align:center;'>弹出层</div>    
    </div>
</body>

fadeIn(),fadeOut(),fadeTo(),如果先设置了fadeTo(),则fadeIn()后不透明度会到达指定的位置；

$(function(){
            var speed=500;
            $('#btnShow').click(function(event){
                var offset=$(event.target).offset();
                $('#divPop').css({top:offset.top+$(event.target).height()+'px',left:offset.left+'px'});
                $('#divPop').fadeTo(0,0.66);
                if($('#divPop').css('display')=='none'){
                    $('#divPop').fadeIn(speed);
                }else{
                    $('#divPop').fadeOut(speed);
                }
            });
        });

View Code

animate(params,[duration],[easing],[callback]); animate(params,options)自定义动画；

参数说明

1.params(可选)

类型:Options

说明:一组包含作为动画属性和终值的样式属性和及其值的集合.

讲解:通过把元素的样式属性值, 从当前值逐渐调整到params设置的值而产生动画效果.

2.duration(可选)

类型:String,Number

说明:三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)

讲解:动画效果持续的时间, 时间越长则变得越慢. 如果省略则不会产生动画.

3.easing(可选)

类型:String

说明:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".

讲解:为了让元素逐渐达到params设置的最终效果, 我们需要有一个函数来实现渐变, 这类函数就叫做easing函数. 但是需要这里传递的只是easing函数名称, 使用前需要先将easing函数注册到jQuery上.

4.options参数

类型:Options

说明:一组包含动画选项的值的集合。

讲解:所支持的属性如下:

duration: 与上面的duration参数相同
easing: 与上面的easing参数相同
complete :类型为Function, 在动画完成时执行的函数
step: Callback
queue (Boolean): (默认值: true) 设定为false将使此动画不进入动画队列 (jQuery 1.2中新增)

练习：1自定义坠落动画；

设定透明度隐藏'opacity':'hide'，坠落高度，坠落后隐藏；

坠落高度：窗口高度-元素高度-元素顶部距离窗口顶部的距离；

<script type='text/javascript'>
        $(function(){
            $("#divPop").animate({
                "opacity":"hide",
                "top":$(window).height()-$("#divPop").height()-$("#divPop").position().top
            },
            600,
            function(){$("#divPop").hide();}
            );
        });
    </script>

View Code

练习2：让一个div越来越大然后消失

设定透明度隐藏'opacity':'hide'，最终宽度是窗口宽度-100，最终高度同理。

js:

<script type="text/javascript">
        $(document).ready(function()
        {
            $("#divPop")
            .animate(
            {
                "opacity": "hide",
                "width": $(window).width()-100 ,
                "height": $(window).height()-100
            },
            500
            );
        });

View Code

html:

<body>
    <div id='divPop' style="background-color:#f0f0f0; border:solid 1px #000;
        width:300px; height:100px; position:absolute;">
        <div style='text-align:center;'>弹出层</div>    
    </div>
</body>

View Code

jQuery.fx.off = true时，立刻关闭动画效果，false重新开启动画效果，

来源：https://www.cnblogs.com/maoduoduo/p/3439383.html

标签

animate

动画

jquery动画

top

jquery