1. 程式人生 > >使用animate.css動畫外掛

使用animate.css動畫外掛

        1.提示:使用animate.css導航裡面的li或者a後面的線不能用border,用背景圖
2.將animate.css在頭部連結上
3.在animate.css官網上看看用什麼動畫和需用動畫的名字
http://daneden.github.io/animate.css/
4.在js中把想給動畫的元素加兩個類就可以,第一個類固定是animated,第二個類是動畫的名字(也可以直接在HTML裡面直接加)
$(".slide-introduce li:eq(0)").addClass("animated bounceInLeft");
5.如果動畫需要延時就給屬性一個css,注意要寫瀏覽器字首,不寫只有IE和360急速能用----------------這裡要新增上瀏覽器的各個字首-----------------
animation-delay:2s;//動畫延遲出來     
animation-duration:3s; //動畫花費的時間
animation-iteration-count:2;//動畫播放次數
6.動畫效果執行完成後還可以通過以下程式碼新增事件
$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);


    $(function(){
        $(".content").mouseover(function(){
            $(this).stop().animate({
                width: "100px"
            }).mouseout(function(){
                $(this).stop().animate({
                    width:"10px"
                });
            });
        });
    })