台灣最大程式設計社群網站
線上人數
1481
 
會員總數:245013
討論主題:188959
歡迎您免費加入會員
討論區列表 >> AJAX / JSON / jQuery >> jquery滑鼠一直觸發hover(Jquery一直上下滑動)
[]  
[我要回覆]
1
回應主題 加入我的關注話題 檢舉此篇討論 將提問者加入個人黑名單
jquery滑鼠一直觸發hover(Jquery一直上下滑動)
價值 : 20 QP  點閱數:1065 回應數:4

樓主

黑布丁愛你愛你唷~
門外漢
0 1
76 2
發送站內信

不好意思,我是jquery新手,我希望是滑鼠移上去div後,下拉下來,滑鼠在div裡動時,不會觸發hover,離開時才會上拉。

但是我現在出現的是,
滑鼠移上去後,他會上下動不停,等到大概2秒才自己停下來。
但如果在div裡移動,又會開始上拉下拉一直動。

對不起,我其實不知道這問題要怎麼解釋,但我發現這問題的關鍵字是"滑鼠"、"閃爍"、"冒泡",
我也已經查了很多大陸的文章,試了很多方式,一樣沒辦法改變這狀況。

有點類似這個文章:
jquery animate 鼠标快速移动闪烁的解办法
http://www.it610.com/article/1472266.htm



-----------------------------------------------------------------------------------------------
這是我的程式碼:

Jquery:

$('#div_Draw').hover(function () {
//$(this).addClass('circle_gray');
//$('#div_draw').slideDown();
//當滑鼠滑入時將div_DrawDown會下滑
//$('#div_DrawDown').stop().animate({ height: 'show' });
//当鼠标移上去的时候就菜单下拉,当鼠标离开的时候菜单上卷,下拉和上卷的动画时间都是5秒种。
$("#div_DrawDown").stop(true).animate({ height: "show" }, 1000).animate({ width: "100px" }, 500);
//$('#div_DrawDown').fadeIn("slow");
}
, function () {
//$(this).removeClass('circle_gray');
//$('#div_draw').slideUp();
//$('#div_draw').animate();
//滑開時div_DrawDown會收起
//$('#div_DrawDown').stop().animate({ height: 'hide' });
$("#div_DrawDown").stop(true).animate({ height: "hide" }, 1000).animate({ width: "100px" }, 500);
//$('#div_DrawDown').fadeOut("slow");
});

也試過mouseenter、mouseleave:

//$('#div_Draw').mouseenter(function () {
// //$(this).addClass('circle_gray');
// //$('#div_draw').slideDown();
// //當滑鼠滑入時將div_DrawDown會下滑
// $('#div_DrawDown').stop(true,true).animate({ height:'show' },1000);
// //$('#div_DrawDown').stop(true,true).css("display", "block");
//})

//$('#div_Draw').mouseleave(function () {
// //$(this).removeClass('circle_gray');
// //$('#div_draw').slideUp();
// //$('#div_draw').animate();
// //滑開時div_DrawDown會收起
// $('#div_DrawDown').stop().animate({ height:'hide' },1000);
// //$('#div_DrawDown').stop().css("display", "none");
//});







HTML:
<div id="div_Draw" class='circle'>
<div class='inner' style="background-image: url('../Img/test1.jpg')">
<span>
<a href="Sort_Img.aspx?Category_Iteam=1">
<asp:Label ID="Label1" runat="server" Text="測試" CssClass="circle_text" style="top: 83px;left: 39px;color:#fff;" ></asp:Label>
</a>
</span>
</div>

</div>
<div id="div_DrawDown" class='circle_gray' style="top: 72px;left: 29px;">
<span>
<a href="Sort_Img.aspx?Category_Iteam=1">
<asp:Label ID="Label3" runat="server" Text="測試" CssClass="circle_text" ></asp:Label>

</a>
</span>
</div>





搜尋相關Tags的文章: [ 滑鼠 ] , [ 閃爍,一直 ] , [ 閃 ] , [ 動 ] , [ hover ] , [ mouseenter ] , [ mouseenter ] ,
本篇文章發表於2016-04-18 11:44
別忘捐VP感謝幫助你的人 新手會員瞧一瞧
1樓
回應

蒼天浩月
檢舉此回應
onmouseout
本篇文章回覆於2016-04-18 17:03
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
2樓
回應

浩瀚星空
捐贈 VP 給 浩瀚星空 檢舉此回應
不知道你的div_Draw是上面的蓋子還是底下的測試。

如果是上面的蓋子,這樣你的偵測就是錯的了。

不過因為也有圖層的關係。所以一般要做成雙向偵測。也就是底下跟蓋子都要做偵測。
然後動畫的部份就用function的方式來運行。

另外一般jquery的函數用法可以用如下的方式




改成這樣會比較不容易出問題。

to:蒼天浩月
這堿Ojquery。jquery並沒有onmouseout的事件處理的。
那是javascript跑的東西。
不要把你錯誤的觀念帶過來。我知道你常將javascrip跟jquery混著用了。
正確來說jquery是mouseout。不過沒hover事件好用。因為它沒有拖離相關的處理。
本篇文章回覆於2016-04-19 10:11
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
3樓
作者回應

黑布丁愛你愛你唷~
檢舉此回應
To:浩瀚星空

我的確是照你這樣寫呀,難道不對嗎?

$('#div_Draw').hover(function () {
$("#div_DrawDown").stop(true).animate({ height: "show" }, 1000).animate({ width: "100px" }, 500);
}
, function () {
$("#div_DrawDown").stop(true).animate({ height: "hide" }, 1000).animate({ width: "100px" }, 500);
});

抱歉,我把我試過的程式碼註解起來,可能太亂了。
但我的確是使用hover。

因為我也解不出來,所以我現在用css3的Transition,飛肯設計學院的範例(http://www.flycan.com/article/css/css3-transition-1169.html)
還是沒辦法做到會想jquery一樣的下滑,但是滑鼠在上面移動是不會再一直閃動。

謝謝您的幫忙!
--------------------------------------------------------------------------

蒼天浩月 的 onmouseout我是過了,但因為我在style那堣w有指定background-image的圖片了,
所以無法使用,也很謝謝您的幫忙。
本篇文章回覆於2016-04-19 16:48
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
4樓
作者回應

黑布丁愛你愛你唷~
檢舉此回應
To:浩瀚星空

不好意思,我一直在思考您說的"底下跟蓋子都要做偵測"。
我下面(#div_Draw)是偵測滑鼠是否有滑上去,上面的蓋子("#div_DrawDown)是偵測滑鼠移上來後,顯示出來蓋上去。

一般偵測不是都是偵測底下的(#div_Draw)是否有滑鼠,
當滑鼠上去後,蓋子("#div_DrawDown)蓋上去。
如果是"底下跟蓋子都要做偵測",那...蓋子("#div_DrawDown)要如何偵測?
本篇文章回覆於2016-04-19 16:59
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
   
1

回覆
如要回應,請先登入.