jquery-ui - jQuery切换幻灯片元素但不完全隐藏元素

Question

以下示例可能是尝试和解释我要达到的效果的最简单方法：

http://jsfiddle.net/qSscJ/2/

代码：

$(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);
    });
});