Jquery：懸停幻燈片選項卡機制

我目前正在使用滑動選項卡。我正在執行懸停功能來觸發標籤向左滑動。唯一的一點是，當鼠標懸停它時，選項卡會滑動，但它會立即關閉。我希望這個標籤在鼠標懸停後保持打開狀態，關閉標籤的唯一方法是點擊最初的「箭頭」div。這裏是我的工作演示：http://jsfiddle.net/eMsQr/6/Jquery：懸停幻燈片選項卡機制

<script language="javascript"> 
    $(document).ready(function() { 
    $("#arrow").hover(
    function(){ 
     $("#inner").stop().animate({marginRight: "0px", opacity: "1px", height: "100px"}, 500); 
    }, 
    function(){ 
     $("#inner").stop().animate({marginRight: "-100px", opacity: "1px", height: "100px"}, 500); 
    } 
); 
}); 
</script> 

<html> 
<div style="background-color: rgb(204, 204, 204); height: 300px; width: 300px; overflow: hidden; position: relative;"> 
    <div id="inner" style="height: 100px; width: 150px; background-color: rgb(0, 204, 102); float: right; margin-right:-150px;" >Form is here</div> 

    <div id="arrow" style="height: 100px; width: 50px; background-color: rgb(255, 0, 0); float: right; cursor: pointer; position: absolute; top: 0; right: 0;" >Arrow is here</div> 
</div> 
</html>

來源

2012-03-24 CodingWonders90

http://jsfiddle.net/eMsQr/13/對此有幫助 – Rafay 2012-03-24 15:54:11

你的意思是？使用mouseenter - 和click -event：

$(document).ready(function() { 
    $("#arrow") 
    .mouseenter(function(){ 
     $("#inner").stop().animate({marginRight: "0px", opacity: "1px", height: "100px"}, 500); 
    }) 
    .click(function(){ 
     $("#inner").stop().animate({marginRight: "-100px", opacity: "1px", height: "100px"}, 500); 
    }); 
});

另見this example。

來源

2012-03-24 15:53:23 scessor

謝謝.mouseenter是解決問題的主要關鍵。 – CodingWonders90 2012-03-24 16:04:30

$(document).ready(function() { 
    $("#arrow").hover(function(){ 
     $("#inner").stop().animate({marginRight: "0px", opacity: "1px", height: "100px"}, 500); 
    }, 
    function(){}); 
}); 


$("#arrow").click(function(e){ 
    $("#inner").stop().animate({marginRight: "-100px", opacity: "1px", height: "100px"}, 500); 
});

小提琴是here。

來源

2012-03-24 15:55:24

Jquery：懸停幻燈片選項卡機制

回答

相關問題