[問題] [jQuery] fadeIn和stop()的錯誤
請教一下版友 @ @
我用jQuery的fadeIn和fadeOut作了一個簡單的效果
是滑鼠經過按鈕 A1 則淡入圖片A2、經過B1則淡入B2...滑出則淡出
為了避免滑鼠連續觸發 所以加上stop();
但是我發現，如果我用較快的速度經過，就會有錯誤
可能中間會有某按鈕失效 滑鼠一定要再去別的圖片完整的淡入淡出後
才能再讓失效的按鈕恢復正常效果
火狐是顯示在判斷透明度的時候有發生錯誤...
請問如何避免這樣的問題呢？(delay也無法避免)
原始碼如下
JS========================
$(function(){
for(i=1;i<=7;i++){
$("#i_a"+i).mouseover(showCopy);
$("#i_a"+i).mouseout(hideCopy);
}
function showCopy(){
var objN=this.id.substr(3)
$("#i_copy"+objN).stop().fadeIn(500)
}
function hideCopy(){
var objN=this.id.substr(3)
$("#i_copy"+objN).stop().fadeOut(500)
}
})
HTML==================================
<!--圖A是按鈕背景-->
<div class="i_mainMenu">
<a class="i_a" id="i_a1"> </a>
<a class="i_a" id="i_a2"> </a>
<a class="i_a" id="i_a3"> </a>
<a class="i_a" id="i_a4"> </a>
<a class="i_a" id="i_a5"> </a>
<a class="i_a" id="i_a6"> </a>
</div>
<div class="mainMenuCopy">
<img src="images/mainMenuCopy_01.png" id="i_copy1"/>
<img src="images/mainMenuCopy_02.png" id="i_copy2"/>
<img src="images/mainMenuCopy_03.png" id="i_copy3"/>
<img src="images/mainMenuCopy_04.png" id="i_copy4"/>
<img src="images/mainMenuCopy_05.png" id="i_copy5"/>
<img src="images/mainMenuCopy_06.png" id="i_copy6"/>
</div>
CSS===================
#i_copy1,#i_copy2,#i_copy3,#i_copy4,#i_copy5,#i_copy6{
display:none;
position:absolute;
}
謝謝大家 @ @a
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 60.249.39.28
※ 編輯: oj113068 來自: 60.249.39.28 (02/22 19:40)
※ 編輯: oj113068 來自: 60.249.39.28 (02/22 19:49)
推
02/22 19:58, , 1F
02/22 19:58, 1F
.stop(true)和.stop(true,true)都還是會呢ˊˋ"
(我記得預設值就是true,true...)
推
02/22 21:04, , 2F
02/22 21:04, 2F
呃...
就是滑鼠經過<a>，然後對應的<img>會淡入，滑鼠離開<a>，則淡出
例如 滑鼠經過<a class="i_a" id="i_a1"> </a>的時候
<img src="images/mainMenuCopy_01.png" id="i_copy1"/>會淡入
滑出則就淡出 這樣而已
但是這個效果有六張圖這樣@ @
因為是<a>元素所以看不懂嗎Orz 對不起 空元素設背景是我做按鈕的習慣
推
02/22 22:09, , 3F
02/22 22:09, 3F
不會閃
假設我的滑鼠快速的經過這一整排按鈕，其中一個按鈕就會出現錯誤 但沒有一定是哪個
出錯。
所謂的出現錯誤，是指即使我滑鼠經過<a>，對應的<img>也沒有fadeIn和fadeOut
一定要再經過別的按鈕，再回來才會正常。
例如可能是#i_a1有錯誤，滑鼠經過，正常應該要#i_copy1會淡入，然後滑鼠滑出時淡出
但不管怎麼經過都沒有反應，唯有移動到其他按鈕，例如隔壁的#i_a2，讓#i_copy2淡入
再淡出，然後再回去經過#i_a1，才會恢復
我會認為問題出在stop()上，是因為如果拿掉stop();不管我多快速的讓滑鼠經過幾次都
不會有這種錯誤，但是就是會有重複觸發的問題。
※ 編輯: oj113068 來自: 59.126.30.45 (02/22 22:48)
→
02/22 22:35, , 4F
02/22 22:35, 4F
呃...不好意思JQuery方面我是新手，我也覺得每個元素一個id有點麻煩，
不過沒有解決的緊迫性所以暫時這樣做，C大這一方面有什麼改善的建議嗎^^"
→
02/22 22:39, , 5F
02/22 22:39, 5F
→
02/22 22:40, , 6F
02/22 22:40, 6F
我原本是寫在滑鼠事件前面 這樣寫
$("#i_a"+i).stop().mouseover(showCopy);
但是卻沒有stop()的效果所以才挪去 fadeIn前面的
不知道是不是哪裡還有打錯 Orz 明天開檔案再試一次吧
謝謝C大
※ 編輯: oj113068 來自: 59.126.30.45 (02/22 22:51)
※ 編輯: oj113068 來自: 59.126.30.45 (02/22 22:53)
推
02/22 22:55, , 7F
02/22 22:55, 7F
不是喔
按鈕不動，
淡出的是別的<img>
※ 編輯: oj113068 來自: 59.126.30.45 (02/22 22:56)
→
02/22 23:06, , 8F
02/22 23:06, 8F
→
02/22 23:13, , 9F
02/22 23:13, 9F
謝謝R大的檔案 確是如此
不過我剛剛用別的檔案試試看把stop();挪到滑鼠事件前
確實stop()就變成沒有用了~||| (變成重複觸發會閃爍)
我可能要再研究一下自己到底搞錯了哪裡...
先謝謝推文的版友~^^"
※ 編輯: oj113068 來自: 59.126.30.45 (02/22 23:29)
推
02/22 23:33, , 10F
02/22 23:33, 10F
→
02/22 23:47, , 11F
02/22 23:47, 11F
是S大的效果沒錯...謝謝S大
我研究一下(因為對JQuery還不算很熟，有種越級打怪感 Q_Q)
也謝謝R大的檔案XD
※ 編輯: oj113068 來自: 59.126.30.45 (02/22 23:50)
→
02/22 23:50, , 12F
02/22 23:50, 12F
→
02/23 00:26, , 13F
02/23 00:26, 13F
推
02/23 00:37, , 14F
02/23 00:37, 14F
推
02/23 00:46, , 15F
02/23 00:46, 15F
→
02/23 00:46, , 16F
02/23 00:46, 16F
推
02/23 00:59, , 17F
02/23 00:59, 17F
→
02/23 00:59, , 18F
02/23 00:59, 18F
剛剛發現 R大提供的範例 其實也會耶Orz....
※ 編輯: oj113068 來自: 60.249.39.28 (02/23 11:41)
參考各位的建議
現在這樣改
$(function(){
$(".i_mainMenu a").hover(showCopy,hideCopy);
function showCopy(){
var target = $(".i_mainMenu a").index($(this))+1;
$("#i_copy"+ target).stop(true,true).fadeIn(500)
}
function hideCopy(){
var target = $(".i_mainMenu a").index($(this))+1;
$("#i_copy"+ target).stop(true,true).fadeOut(500)
}
})
※ 編輯: oj113068 來自: 60.249.39.28 (02/23 13:30)
推
02/23 18:00, , 19F
02/23 18:00, 19F
→
02/23 18:00, , 20F
02/23 18:00, 20F
謝謝S大的建議:D
※ 編輯: oj113068 來自: 60.249.39.28 (02/23 18:40)
Web_Design 近期熱門文章
PTT數位生活區 即時熱門文章
