部分slideDown與jQuery

我有一些按鈕，有抽屜菜單，我想要做的是添加一個狀態，以便當用戶懸停在按鈕，抽屜輕微碰撞（也許有點擺動/橡膠），讓他們知道抽屜裏有更多的信息。部分slideDown與jQuery

我有滑動工作和懸停功能設置，但我不知道如何實現部分slideDown。

任何想法？

代碼：

<div class="clause"> 
    <div class="icon"><img src="http://i.imgur.com/rTu40.png"/></div> 
    <div class="label">Location</div> 
    <div class="info">Midwest > Indiana, Kentucky; Southwest > Texas, Nevada, Utah; Pacific > California, Hawaii</div>   
</div> 
<div class="drawer">Info 1<br/><br/></div> 
<div class="drawerBottom"></div>

$(".clause").click(function() { 
    var tmp = $(this).next("div.drawer"); 
    if(tmp.is(":hidden")) 
     tmp.slideDown('3s'); 
    else 
     tmp.slideUp('3s'); 
}); 

$(".clause").hover(function() { 

});

來源

2012-10-20 Jon

http://api.jquery.com/animate/ –

懸停需要兩個回調作爲參數。一個放在'mouseenter'和一個放在'mouseleave'上 –

這兩個參數不是懸停嗎？ – Jon

使用這樣的事情。代碼非常骯髒（我是一個初學者：P）所以不要使用它，因爲它是..清理它一點。

http://jsfiddle.net/VWQQ2/

$(".operator").click(function() { 
    if ($(this).text() == "OR") $(this).html("AND"); 
    else if ($(this).text() == "AND") $(this).html("NOT"); 
    else if ($(this).text() == "NOT") $(this).html("OR"); 
}); 

var tmp; 

$(".clause").hover(function() { 

    tmp = $(this).next("div.drawer"); 
    if (tmp.is(':hidden')) { 
     tmp.height("1px"); 
     tmp.stop(true, true); 
     tmp.slideDown('3s'); 
    } 
}, 

function() { 

    tmp = $(this).next("div.drawer"); 
    if (tmp.height() <= '1') { 
     tmp.slideUp('3s'); 

    } 
}); 


$(".clause").click(function() { 
    tmp = $(this).next("div.drawer"); 
    tmp.stop(true, true); 
    if (tmp.height() <= '1') { 
     tmp.height('100%'); 
     var height = tmp.height(); 
     tmp.height('1px'); 
     tmp.animate({ 
      'height': height 
     }, 500); 
     state = 'open'; 
    } 
    else if (tmp.height() > '2') { 
     tmp.slideUp(500); 
    } 
});

來源

2012-10-20 20:29:35

這基本上是我想要的。我怎樣才能使懸停狀態更快？我試着調整秒數，但沒有奏效。 – Jon

部分slideDown與jQuery

回答

相關問題