Question

以下示例可能是尝试解释我想要实现的效果的最简单方法：

代码：

$(function() {
    $('#handle').click(function() {
        $('#box').toggle('slide', { direction: 'right' });
    });
});

单击蓝色手柄使整个红色框折叠。盒子折叠后如何保持蓝色手柄可见（同时保持手柄固定在盒子边缘）？我对其他jQuery UI API持开放态度来实现这种效果。

Answer 1

您可以直接为宽度设置动画，以便元素在动画结束时不会被标记为隐藏：

$(function() {
    $('#handle').click(function() {
        $('#box').animate({width: "0px"}, 1000);
    });
});

但是，更改设计会更好，以便蓝色标签不包含在您关闭的框中，如下所示：http://jsfiddle.net/jfriend00/gKQrv/。

$(function() {
    $('#handle').click(function() {
        var box = $('#box');
        var targetWidth = box.width() > 0 ? 0 : 150;
        box.animate({width: targetWidth + "px"}, 1000);
    });
});

jQuery切换滑动元素但不完全隐藏元素

1 个答案: