Частичное понижение слайда с помощью jQuery

Question

У меня есть несколько кнопок с меню ящика, и я хотел бы добавить состояние, чтобы когда пользователь наводил курсор на кнопку, ящик слегка выдавливался (возможно, с небольшим покачиванием / резиновым поясом), чтобы он знал, что есть ящик с дополнительной информацией.

У меня есть скользящая работа и настроенная функция наведения, но я не знаю, как реализовать частичное слайд-даун.

Есть идеи?

Скрипка

Код:

<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);
    }
});