Question

我正在尝试使用Jquery创建具有固定位置的简单小部件。我最近开始学习JQuery，所以我想问一下比这更好的方法是什么：

 var i = 0 ;
    $('#button').on('click', function() {
        if( i === 0) {
            $('#widget').animate({'bottom':0},700); 
            i = 1;
        } else {
            $('#widget').animate({'bottom': -211},700); 
            i  = 0;
        }
     });

完整代码： http://jsfiddle.net/zX8He/

我认为有更好的方法

Answer 1

你可以在点击时切换一个类，然后让CSS完成剩下的工作。

UPDATED EXAMPLE HERE

$('#button').on('click', function() {
    $(this).parent('#widget').toggleClass('open');
});

CSS

#widget {
    width: 150px;
    height: 250px;
    background: gray;
    border: 1px solid black;
    position: absolute;
    right: 0;
    bottom: -211px;
    transition:all 2s;
    -webkit-transition:all 2s;
    -moz-transition:all 2s;
}
#widget.open {
    bottom:0px
}

这很简单，只需使用CSS过渡并为.open类添加样式。值得注意的是，我将overflow:hidden添加到body元素以隐藏屏幕下方的元素。您还可以将cursor:pointer添加到:hover上的按钮元素，以表明它是可点击的。 (example)

#button:hover {
    cursor:pointer;
}

Answer 2

使用jQuery将允许您的代码跨浏览器兼容，因为并非所有浏览器都支持CSS3过渡。 http://jsfiddle.net/fyCcx/

css：

        .btn{
            border:1px solid #888;
            background: #f8f8f8;
            width:150px;
            height:40px;
            margin:0px;
        }

        #widget{
            width:150px;
            position: absolute;
            right:0px;
            background: #333;
            bottom:0px;
        }

html

    <div id="widget">
        <button class="btn">Click Me</button>
    </div>

脚本：

        $(document).ready(function(){
            var open = false;
            $('.btn').click(function(){
                if( !open ){
                    $('#widget').animate({
                        height: '400px'
                    }, 2000);
                    open = true;
                } else{
                    $('#widget').animate({
                        height: $('.btn').height() + 'px'
                    }, 2000);
                    open = false;
                }
            })
        });

简单固定小部件

2 个答案: