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。

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

2 个答案: