jQuery点击事件部分动画特效示例

说到特效，最基本的应该就是隐藏与显示了，在jQuery中这两个方法分别为隐藏（hide（））显示（show（））

 因为这个可以用很多种方法实现，就不上代码了

 

通过 jQuery，可以实现元素的淡入淡出效果。

jQuery 拥有下面四种 fade 方法：

    fadeIn()
    fadeOut()
    fadeToggle()
    fadeTo()

前三个基本划为一类，因为fadeIn（）是单独的出现效果，fadeOUt（）为单独的隐藏效果，而fadeToggle（）则是两者综合，当隐藏时点击会出现，当出现时点击会隐藏

前三个中有两个参数第一个参数为演示效果所要的时间，以毫秒为单位。第二个参数为回调函数，即执行完前面的操作后的反应，可省略。

第四个fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。 

$(selector).fadeTo(speed,opacity,callback);

有三个参数

必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

可选的 callback 参数是该函数完成后所执行的函数名称。

 

第二个则是滑动效果，可以利用jqery的slideDown（）（向下滑动）和slideUp（）（向上滑动）来实现也可以用单个的 slideToggle（）来替代前面两个函数，

 

第三是自定义动画，在滑动中只能实现上下滑动，那如何来实现左右滑动呢？这就需要用到自定义动画，自定义动画的方法为animate（）

css样式

#div0 div{
            width:150px;
            height:150px;
        }
        #div1{
            background-color:red;
        }
        #div2{
           background-color:blue;
        }
        #div3{
            background-color:black;
        }
        #panel,#flip
{
    padding:5px;
    text-align:center;
    background-color:#e5eecc;
    border:solid 1px #c3c3c3;
}
#panel
{
    padding:50px;
    display:none;
}
#fli{
    width:25px;
    height:100px;
    text-align:center;
    font-size:20px;
    line-height:50px;
    background-color:bisque;
    border-radius:8px;
    }
#pane{
    display:none;
    background-color:aqua;
    width:0px;  
    height:100px; 
    border-radius:8px;
}
li{
    float:left;
    list-style:none;
}

 

html元素

 

 
<div>
        <p id="hide">点我我就没了</p>
        <button id="toggle">显示/隐藏</button>
    </div>
    <div id="div0">
        <div id="div1"></div>     <div id="div2"></div>
        <div id="div3"></div>
        <button id="toggleDiv">我会魔法哦</button>
    </div>
    
        <div id="flip">点我滑下面板</div>
        <div id="panel">Hello world!</div>
    <button id="stop">停止动画</button>
    <ul id="sec">
        <li id="fli">卷轴</li>
        <li id="pane">你准备好进入符文之地了么？</li>
    </ul>

$(function () {
    $("#hide").click(function(){
        $(this).hide("slow", function () {
            alert("他们不见了")
        });
        
    })
    $("#toggle").click(function () {
        $("#hide").toggle(1000);
    })
    $("#toggleDiv").click(function () {
        $("#div1").fadeToggle(3000);
        $("#div2").fadeToggle("slow");
        $("#div3").animate({
            opacity: '0.5'
        })
    });
    $("#flip").click(function () {
        $("#panel").slideToggle(3000);
    })
    $("#fli").click(function () {
        $("#pane").css({ "display": "block" });
        $("#pane").animate({
            //如果是+=则会一直增长
            width: '300px',
            height: '100px',          
        }, 1000).animate({
            width: '0px',
            height: '100px',
            
        }, 3000, function () {
            $("#pane").css({ "display": "none" });
        })
    })
    $("#stop").click(function () {
        $("#pane").stop();
    })

上面呢第一个是几个演示所用的元素，具体方式就在最后的代码块中了

关于回调函数，如果需要的时候还是写函数比较好，下面放两张图对比一下有回调函数和没有回调函数的区别

这个是没有回调函数的情况下，设置的点击事件为<P>标签内容消失，可以看到在弹窗出现时<P>标签并没有消失，当关闭弹窗后才会执行消失事件，

这个则是有回调函数的情况，内容先消失后才会有弹窗出现。

具体应用的话，可以根据情况选择。