Question

我有一些带抽屉菜单的按钮，我想要做的是添加一个状态，这样当用户将鼠标悬停在按钮上时，抽屉会略微颠簸（可能有一点摆动/橡皮筋）所以他们知道抽屉里有更多的信息。

我有滑动工作和悬停功能设置，但我不知道如何实现部分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() {

});

Answer 1

使用类似的东西。代码非常脏（我是初学者：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);
    }
});

使用jQuery部分slideDown

1 个答案: