jQuery动画

最新推荐文章于 2022-12-22 17:52:21 发布

zh__quan

最新推荐文章于 2022-12-22 17:52:21 发布

阅读量128

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/zh__quan/article/details/98237325

版权

jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

jQuery-addBack()&end()&parent()区别-children和find的区别

jQuery淡入淡出动画-右下角广告

jQuery动画

通过jQuery动画方法,能够很轻松地为网页添加非常精彩的视觉效果,给用户一种全新体验

动画分类

1.显示、隐藏

2.滑动、卷动

3.淡入、淡出

4.自定义动画

jQuery显示&隐藏&切换动画

显示

show(毫秒, 完成回调函数)

隐藏

hide(毫秒, 完成回调函数)

切换

toggle(毫秒, 完成回调函数)

jQuery展开&收起动画

核心代码

展开

slideDown(毫秒, 完成回调函数)

收起

slideUp(毫秒, 完成回调函数)

切换

slideToggle(毫秒, 完成回调函数)

下拉菜单

<script type="text/javascript">
    $(function () {
        // 1.1 先让第一个二级菜单隐藏
        $('.firstNav>li.current .secondNav').css('display', 'none');

        // 1.2 监听鼠标的进入
        /*$('.firstNav>li').hover(function () {
             $(this).children('.secondNav').slideDown(200);
             $(this).siblings().children('.secondNav').slideUp(200);
        }, function () {
            $(this).children('.secondNav').slideUp(200);
        });*/

        $('.firstNav>li').hover(function () {
            $(this).children('.secondNav').stop().slideToggle(200);
        });
    });
</script>

动画队列

解决方案

开始动画之前先停止之前动画队列中的动画

stop()

$(this).children(".secondNav").stop().slideToggle();

jQuery-addBack()&end()&parent()区别-children和find的区别

end()

选择调用链上一级

addBack()

额外添加调用链上一级

children()

返回儿子节点(被包装成jQuery对象)

find()

从后代节点进行查找(被包装成jQuery对象)

jQuery淡入淡出动画-右下角广告

<script type="text/javascript">
    $(function () {
      /*  // 1. 设置初始透明度
        var opacity = 0.3;
        var timer = setInterval(function () {
            opacity = opacity === 1 ? 0.3 : 1;
           $('.ad').fadeTo(500, opacity);
        }, 500);

        // 2. 关闭
        $('.close').click(function () {
            // 2.1 清除定时器
            clearInterval(timer);
            // 2.2  滑动
            $(this).parent().stop(true).slideUp(1000);
        });*/

      // $('.ad').delay(1000).slideDown(1000);
      // $('.ad').delay(1000).show(1000);

        // $('.ad').delay(1000).fadeIn(1000).delay(1000).fadeOut(1000);

        $(document).click(function () {
            $('.ad').fadeToggle(1000);
        })
    });
</script>