Jquery如何使用animation動(dòng)畫效果改變背景色的代碼
一、問(wèn)題引入
jquery的animate動(dòng)畫雖然強(qiáng)大,但是無(wú)法使用其進(jìn)行背景色(background-color)的動(dòng)畫效果變化,因?yàn)閍nimate動(dòng)畫效果只能動(dòng)態(tài)改變數(shù)值型的參數(shù),例如:top,left,width,height...等等
好像網(wǎng)上也有說(shuō)要裝一個(gè) "jquery.ui" 的插件之類的。但是博主我實(shí)在不想引入過(guò)多的插件, 且恰好本人掌握的CSS比較好一點(diǎn)點(diǎn), 所以就想了下面這么個(gè)法子。
但好在 CSS 它自帶的animation動(dòng)畫效果更加強(qiáng)大,它可以為我們提供背景色的動(dòng)態(tài)變化。所以我們可以利用 Js+CSS 的方法達(dá)成我們預(yù)期效果。
二、demo展示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Jquery無(wú)法通過(guò)animate動(dòng)畫改變背景色</title> <style type="text/css"> #btn{ display: block; width:100px; margin:50px auto 0px; font:bold 30px/50px 'Microsoft Yahei'; background-color: lightblue; } .box{ margin:100px auto 0px; background-color: green; width:400px; height:400px; } @keyframes color_turn{ from{ background-color: green; } to{ background-color: blue; } } .change_color{ animation: color_turn 500ms ease 2 alternate; } </style> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function(){ var obtn = $('#btn'); var obox = $('.box'); obtn.click(function(){ /* 由于需要?jiǎng)赢嬆軌蛑貜?fù)播放,所以我們需要反復(fù)刪除和添加 change_color 這個(gè)類, 按照正常邏輯,先刪除該類,再添加應(yīng)當(dāng)會(huì)正常播放動(dòng)畫,但經(jīng)多次試驗(yàn)由于兩句執(zhí)行的時(shí)間間隔太小, 導(dǎo)致出現(xiàn)bug,無(wú)法達(dá)到預(yù)期效果,所以我們要想辦法讓這兩句執(zhí)行的時(shí)間間隔長(zhǎng)一點(diǎn) obox.removeClass('change_color'); obox.addClass('change_color'); */ obox.addClass('change_color'); /*----通過(guò)定時(shí)器延遲 1100ms 后執(zhí)行移除類的指令,這樣就能解決問(wèn)題了-----*/ var timer = setTimeout(function(){ obox.removeClass('change_color'); },1100); }) }) </script> </head> <body> <input type="button" id="btn" value="變色"> <div class="box"></div> </body> </html>
2.1 程序設(shè)計(jì)思想
- 首先設(shè)計(jì)好一個(gè)由綠色變?yōu)樗{(lán)色的動(dòng)畫效果,使用一個(gè)類名為 "change_color" 的選擇器來(lái)存放。
- 通過(guò) js 實(shí)現(xiàn)點(diǎn)擊按鈕一次,為 div 標(biāo)簽 增加類名為 "change_color" 的類,增加完后,動(dòng)畫便開(kāi)始播放。 當(dāng)定時(shí)器,經(jīng)過(guò) 1100ms 后會(huì)執(zhí)行移除該類的命令, 使得點(diǎn)擊按鈕可以重復(fù)播放背景色變化的動(dòng)畫效果。
2.2 重點(diǎn)與難點(diǎn)(坑)
之所以,要使用定時(shí)器來(lái)移除 "change_color" 這個(gè)類,是因?yàn)槿绻黾宇惻c移除類兩句代碼 挨得太近 ,會(huì)導(dǎo)致bug,即無(wú)法實(shí)現(xiàn)重復(fù)點(diǎn)擊按鈕,實(shí)現(xiàn)反復(fù)播放動(dòng)畫。所以為了能夠重復(fù)播放,且兩句執(zhí)行時(shí)間間隔不能太小,所以設(shè)置了一個(gè)定時(shí)器,使得 1100ms 后執(zhí)行 (定時(shí)器的時(shí)間還得根據(jù)你的動(dòng)畫持續(xù)時(shí)間而定,保證動(dòng)畫播放完以后,再進(jìn)行類的移除)
其實(shí)還有一種方式,但前提是 中間的代碼足夠長(zhǎng) (即機(jī)器周期足夠長(zhǎng))
obtn.click(function(){ obox.removeClass('change_color'); ... ... ... obox.addClass('change_color'); })
每次點(diǎn)擊,播放動(dòng)畫前先移除類,經(jīng)過(guò)若干個(gè)機(jī)器周期( 究竟多少個(gè),代碼要多長(zhǎng),我也不清楚 ),再增加該類,便能達(dá)到預(yù)期效果。
2.3 效果展示
到此這篇關(guān)于Jquery如何使用animation動(dòng)畫效果改變背景色的文章就介紹到這了,更多相關(guān)Jquery如何使用animation動(dòng)畫效果改變背景色內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
jquery遍歷篩選數(shù)組的幾種方法和遍歷解析json對(duì)象
本文為大家介紹下jquery遍歷篩選數(shù)組的幾種方法和遍歷解析json對(duì)象的具體實(shí)現(xiàn),感興趣的朋友不要錯(cuò)過(guò)2013-12-12jquery實(shí)現(xiàn)郵箱自動(dòng)補(bǔ)全功能示例分享
這篇文章主要介紹了jquery實(shí)現(xiàn)郵箱自動(dòng)補(bǔ)全功能,大家參考使用吧2014-02-02autoIMG 基于jquery的圖片自適應(yīng)插件代碼
為了防止圖片撐破布局,最常見(jiàn)的仍然是通過(guò)onload后獲取圖片尺寸再進(jìn)行調(diào)整,所以加載過(guò)程中仍然會(huì)撐破。2011-03-03jQuery三組基本動(dòng)畫與自定義動(dòng)畫操作實(shí)例總結(jié)
這篇文章主要介紹了jQuery三組基本動(dòng)畫與自定義動(dòng)畫操作,結(jié)合實(shí)例形式總結(jié)了jQuery基本動(dòng)畫函數(shù)與自定義動(dòng)畫相關(guān)操作技巧及使用注意事項(xiàng),需要的朋友可以參考下2020-05-05jQuery實(shí)現(xiàn)可關(guān)閉固定于底(頂)部的工具條菜單效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)可關(guān)閉固定于底(頂)部的工具條菜單效果,可實(shí)現(xiàn)固定位置顯示及響應(yīng)鼠標(biāo)點(diǎn)擊展開(kāi)與關(guān)閉的功能,涉及jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素樣式屬性的相關(guān)技巧,需要的朋友可以參考下2015-11-11