从底部拉出/向上滑动div？

Question

当您单击链接/图像时，我希望某种“聊天”窗口从底部向上滑动。我自己先尝试过，但我无法弄清楚。 在这里和其他网站上进行了一些搜索......但显然我不太擅长这个。

我也看过这个，但我无法让它为我工作：Pull out a div from the bottom

Here 是我目前所拥有的：

<div id="wrapper">
<div id="onlinehulp">
    <div id="clickme"><img src="http://i.imgur.com/hv3Rkf8.png">
        </div>
        <div id="contact-online">
        </div>
</div>

$( "#clickme" ).click(function() {
$( "#contact-online" ).slideToggle( "slow", function() {
    // Animation complete.
});
$('#onlinehulp').animate({bottom: '218px'}, 'slow');
});

我让它工作了，所以当我们单击图像时窗口会向上滑动，但是当我们再次单击图像时它不会向下滑动，即使实际窗口确实消失并向后滑动。

谁能把我推向正确的方向？

Answer 1

要向上滑动，您需要动画回到底部：0px。要知道弹出窗口是否打开，您可以使用一个类：

$( "#clickme" ).click(function() {
    $( "#contact-online" ).slideToggle( "slow", function() {

    });

    if ($('#onlinehulp').hasClass('open')) {
        //close it
        $('#onlinehulp').animate({bottom: '0px'}, 'slow', function() {
            $('#onlinehulp').removeClass('open'); 
        });
    } else {
        // open it
        $('#onlinehulp').animate({bottom: '218px'}, 'slow', function() {
            $('#onlinehulp').addClass('open');
        });
    }
});

Answer 2

$( "#clickme" ).click(function() {
    $( "#contact-online" ).slideToggle( "slow");
    if($(this).hasClass('hide')){
        $('#onlinehulp').animate({bottom: '0px'}, 'slow');
        $(this).removeClass('hide').addClass('show');
    } else {
        $('#onlinehulp').animate({bottom: '218px'}, 'slow');
        $(this).removeClass('show').addClass('hide');
    }
});

更新Fiddle。