jquery - jQuery CSS 行为

Question

对以下代码有一点麻烦。本质上我有一个高度为 40px 的 div 容器，当我点击它时，它会平滑地增长到 320px - 这很好用，但是当 div 增长到全高时，我希望溢出属性从它的静态状态改变隐藏的，可见的。

$(document).ready(function() {
    $('#join').click(function() {
        $('#join').animate({ height: "320px" }, 500);
        $('#join').css('overflow', 'visible');
    })
});​

它确实可以看到几秒钟，然后消失，我也希望它在 div 长到全高后发生。

Answer 1

在animate回调函数中应用样式。见下文，

$(this).animate({height:"320px"}, 500, function () { //this <- #join
   $(this).css('overflow', 'visible');
});

完整代码：

$(document).ready(function() {
   $('#join').click(function() {
       $(this).animate({height:"320px"}, 500, function () {
            $(this).css('overflow', 'visible');
       });
   });
});

Answer 2

然后将其作为回调传递：

$(this).animate({height:"320px"}, 500, function(){
    $(this).css('overflow', 'visible')
});

完整代码：

$(document).ready(function() {
    $('#join').click(function() {
        $(this).animate({
            height: "320px"
        }, 500, function() {
            $(this).css('overflow', 'visible');
        });
    });
});​