[問題] [jQuery] fadeIn和stop()的錯誤

[oj113068 (橘子汁)]

請教一下版友 @ @

我用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">&nbsp;</a>
   <a class="i_a" id="i_a2">&nbsp;</a>
   <a class="i_a" id="i_a3">&nbsp;</a>
   <a class="i_a" id="i_a4">&nbsp;</a>
   <a class="i_a" id="i_a5">&nbsp;</a>
   <a class="i_a" id="i_a6">&nbsp;</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)
推 s25g5d4:.stop(true)
.stop(true)和.stop(true,true)都還是會呢ˊˋ"
(我記得預設值就是true,true...)

推 s25g5d4:我不是很懂你想做甚麼 可以在描述清楚一點嗎?
呃...

就是滑鼠經過<a>，然後對應的<img>會淡入，滑鼠離開<a>，則淡出

例如 滑鼠經過<a class="i_a" id="i_a1">&nbsp;</a>的時候

<img src="images/mainMenuCopy_01.png" id="i_copy1"/>會淡入

滑出則就淡出 這樣而已

但是這個效果有六張圖這樣@ @

因為是<a>元素所以看不懂嗎Orz 對不起 空元素設背景是我做按鈕的習慣

推 aspdoctor:是會一直閃的意思嗎？
不會閃

假設我的滑鼠快速的經過這一整排按鈕，其中一個按鈕就會出現錯誤 但沒有一定是哪個

出錯。

所謂的出現錯誤，是指即使我滑鼠經過<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)
→ Canboo:看到給每個element一個ID就昏了，然後直接用hover就解決
呃...不好意思JQuery方面我是新手，我也覺得每個元素一個id有點麻煩，

不過沒有解決的緊迫性所以暫時這樣做，C大這一方面有什麼改善的建議嗎^^"

→ Canboo:請去jquery找關鍵字 .hover 再搭配 .eq 使用
→ Canboo:還有你原本的問題是.stop下錯地方，要下在mouse事件前
我原本是寫在滑鼠事件前面 這樣寫
$("#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)
推 s25g5d4:所以是按鈕的背景圖片要淡入淡出?
不是喔
按鈕不動，
淡出的是別的<img>

※ 編輯: oj113068        來自: 59.126.30.45         (02/22 22:56)
→ rangerjero:小範例 : http://ppt.cc/PjkJ
→ rangerjero:剩下的自己在調整一下應該就可以變成你要的樣子了!
謝謝R大的檔案 確是如此

不過我剛剛用別的檔案試試看把stop();挪到滑鼠事件前

確實stop()就變成沒有用了~||| (變成重複觸發會閃爍)

我可能要再研究一下自己到底搞錯了哪裡...

先謝謝推文的版友~^^"

※ 編輯: oj113068        來自: 59.126.30.45         (02/22 23:29)
推 s25g5d4:http://jsfiddle.net/Y29Xe/ like this?
→ rangerjero:jQuery 速查表  http://ppt.cc/Ej7i
是S大的效果沒錯...謝謝S大

我研究一下(因為對JQuery還不算很熟，有種越級打怪感 Q_Q)

也謝謝R大的檔案XD

※ 編輯: oj113068        來自: 59.126.30.45         (02/22 23:50)
→ rangerjero:裡面都有範例可以提供快速查閱
→ Rplus:addClass('active')是何用?  jsfiddle裡看不出有用到?
推 s25g5d4:有啊?在第七行
推 s25g5d4:我找到盲點了 fadeOut還沒跑完 active就被拿掉
→ s25g5d4:mouseover的時候根本抓不到...QQ
推 s25g5d4:http://jsfiddle.net/Y29Xe/3/ 圖片平滑淡入淡出
→ s25g5d4:其實應該是背景才對XD
剛剛發現 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)
推 s25g5d4:建議可以用一個變數把$(".i_mainMenu a")替換掉
→ s25g5d4:可以節省不少資源
謝謝S大的建議:D
※ 編輯: oj113068        來自: 60.249.39.28         (02/23 18:40)