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