JS jQuery效果

一、显示与隐藏

显示与隐藏对应的是css样式里的display

            display: block;
            display: none;

而不是visibility

            /* visibility: hidden; */
            /* visibility: visible; */ 

1.显示

1000ms,默认swing，也可选择linear，回调函数是执行完动画再执行。

            $('.box').show(1000, 'swing', function () {
                alert('回调函数');
            });

 2.隐藏

1000ms,默认swing，也可选择linear，回调函数是执行完动画再执行。

            $('.box').hide(1000, 'swing', function () {
                alert('回调函数');
            });

 3.切换

目前状态为隐藏就显示，显示的话就隐藏。

            $('.box').toggle(1000));

二、滑动效果

1.下拉

            $('.box').slideDown(1000);

2.上拉

            $('.box').slideUp(1000);

3.切换

            $('.box').slideToggle(1000);

三、事件切换

hover中包含两个函数，第一个函数是鼠标经过时触发，第二个函数是鼠标离开时触发。

            $('.box').hover(function(){},function(){});

如果只包含一个函数，则鼠标经过与鼠标离开都会触发。常用于Toggle。

四、停止动画

用于阻止上一次的动画，要写在动画的前面。停止排队。

            $('.box').stop().slideToggle(1000);

五、淡入淡出

1.淡入

            $('.box').fadeIn(1000);

2.淡出

            $('.box').fadeOut(1000);

3.切换

            $('.box').fadeToggle(1000);

4.透明度切换

        速度，透明度必须写。

        透明度越小，图像颜色越浅。

        为1时，图像和原来一样；为0时，图像变浅消失。

            $('.box').fadeTo(1000, 0.5);