3.3-jQuery动画效果

男娘i 2023-07-15 09:29 93阅读 0赞

### jQuery动画效果 ###

显示与隐藏 show()/hide()/toggle()

滑动 slideDown()/slideUp()/slideToggle()

淡入淡出 fadeIn()/fadeOut()/fadeToggle()/fadeTo() 自定义淡入淡出效果  
自定义效果 animate()

<div class="box"></div>
        <button>显示</button>
        <button>隐藏</button>
        <button>切换</button>
        <button>滑入</button>
        <button>滑出</button>
        <button>滑入滑出切换</button>
        <button>淡入</button>
        <button>淡出</button>
        <button>淡入淡出切换</button>
        <button>淡入到具体的透明度</button>
        <button>自定义动画</button>
        <script src="./jquery.min.js"></script>
        <script> $(function() { $('button:eq(0)').click(function() { // show(speed,easing,cb) //$('.box').show(); //$('.box').show(1000); // 1000毫秒 $('.box').show('fast',function() { alert('元素显示完毕'); }); // fast slow normal }); $('button:eq(1)').click(function() { $('.box').hide(); }); $('button:eq(2)').click(function() { $('.box').toggle(1000); }); //滑动 $('button:eq(3)').click(function() { $('.box').slideDown(1000); }); $('button:eq(4)').click(function() { $('.box').slideUp(1000); }); $('button:eq(5)').click(function() { $('.box').slideToggle(1000); }); //淡入、淡出、 $('button:eq(6)').click(function() { $('.box').fadeIn(1000); }); $('button:eq(7)').click(function() { $('.box').fadeOut(1000); }); $('button:eq(8)').click(function() { $('.box').fadeToggle(1000); }); $('button:eq(9)').click(function() { $('.box').fadeTo(400,0.8); //第一次参数为时间，第二个参数为透明度 }); //自定义动画 $('button:last').click(function() { $(".box").animate({ left: 400, top: 400, opacity: .5, //backgroundColor: 'red' },500); }); }); </script>

##### 拓展： #####

#### hover()方法 ####

hover() 事件切换 鼠标经过和鼠标离开的复合写法 当只有一个函数，鼠标经过和离开都会执行此函数

$(function() { 
                /* //stop() 方法停止之前的行为 $(".nav").children('li').mouseenter(function() { $(this).children('ul').stop().slideDown(500); }); $(".nav").children('li').mouseout(function() { $(this).children('ul').stop().slideUp(500); }); */
                // hover() 事件切换 鼠标经过和鼠标离开的复合写法 
                $('.nav').children('li').hover(function() { 
                    $(this).children('ul').stop().slideDown(500);
                }, function() { 
                    $(this).children('ul').stop().slideUp(500);
                });
            });