javascript,按下按钮点击下拉?

时间:2013-03-28 01:26:33

标签: javascript html

当我尝试使用javascript向下滑动约200px的div时,用户点击另一个div作为关闭按钮。

有人可以告诉我我会怎么做吗?

<script>
$('.chat_close').click(function(e){
        $('.chat_box').slideDown();
    });

</script>

2 个答案:

答案 0 :(得分:1)

前段时间有人已经问了同样的问题。阿维纳什回答:

var minheight = 20;
var maxheight = 100;
var time = 1000;
var timer = null;
var toggled = false;

window.onload = function() {
    var controler = document.getElementById('slide');
    var slider = document.getElementById('slider');
    slider.style.height = minheight + 'px'; //not so imp,just for my example
    controler.onclick = function() {  
        clearInterval(timer);
        var instanceheight = parseInt(slider.style.height);  // Current height
        var init = (new Date()).getTime(); //start time
        var height = (toggled = !toggled) ? maxheight: minheight; //if toggled

        var disp = height - parseInt(slider.style.height);
        timer = setInterval(function() {
            var instance = (new Date()).getTime() - init; //animating time
            if(instance <= time ) { //0 -> time seconds
                var pos = instanceheight + Math.floor(disp * instance / time);
                slider.style.height =  pos + 'px';
            }else {
                slider.style.height = height + 'px'; //safety side ^^
                clearInterval(timer);
            }
        },1);
    };
};

您可以在此处看到此处:

http://jsbin.com/azewi5

答案 1 :(得分:0)

使用animate

另外,请使用.on

<script type="text/javascript">
$('.chat_close').on('click', function(e){
        $('.chat_box').animate({"top": "200px");
    });

</script>

<强> HTML:

<div class="chat_close">
</div>