溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了jQuery實現點擊旋轉，再點擊恢復初始狀態動畫效果。分享給大家供大家參考，具體如下：
今天遇到要做一個點擊 + 然后開始旋轉動畫后變成 x 具體實現如下
1.HTML
<div class="box rotate"></div> <!--需要加一個初始狀態-->
2.CSS
.box{ //普通樣式
width:100px;
height:100px;
background:skyblue;
}
.rotate1{ //旋轉后的位置
transform:rotate(45deg);
transtion:all .3s linear;
-webkit-transform:rotate(45deg); //還是兼容一下
-webkit-transtion:all .3s linear;
}
.rotate{ //初始狀態的旋轉位置
transform:rotate(0);
transtion:all .3s linear;
-webkit-transform:rotate(0);
-webkit-transtion:all .3s linear;
}
3.JQ
<script>
$(function(){
$(".box").click(function(){
if($(this).hasClass("rotate")){
$(this).removeClass("rotate").addClass("rotate1");
}else{
$(this).removeClass("rotate1").addClass("rotate");
}
})
})
</script>
效果：
感興趣的朋友可以使用如下工具測試上述代碼運行效果：
在線HTML/CSS/JavaScript代碼運行工具：
http://tools.jb51.net/code/HtmlJsRun
在線HTML/CSS/JavaScript前端代碼調試運行工具：
http://tools.jb51.net/code/WebCodeRun
更多關于jQuery相關內容還可查看本站專題：《jQuery動畫與特效用法總結》、《jQuery切換特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常用插件及用法總結》、《jQuery拖拽特效與技巧總結》、《jQuery表格(table)操作技巧匯總》、《jQuery常見經典特效匯總》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
