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

Question

我想要某种 'chat' window 当您单击 link/image 时从底部向上滑动。我自己先尝试过，但我无法弄清楚。在这里和其他网站上做了一些搜索......但显然我不是很擅长这个。

我也看了这个，但我无法让它为我工作：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');
});

我成功了，所以当我们点击图片时 window 会向上滑动，但是当我们再次点击图片时它不会向下滑动，即使实际的 window 确实消失了并向后滑动。

有人能把我推向正确的方向吗？

Answer 1

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

$( "#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。

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

Pull out / slide up div from bottom?

html

jquery

slide

jquery-animate