使用animate.css動畫外掛
阿新 • • 發佈:2019-01-01
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"
});
});
});
})
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"
});
});
});
})