jQuery动画

目录

jQuery动画

jQuery显示&隐藏&切换动画

jQuery展开&收起动画

下拉菜单

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>