我有这个代码可以用来隐藏/显示。我希望 div 在向左移动时隐藏。我怎样才能做到这一点？这就是我的FIDDLE http://jsfiddle.net/dRpWv/306/

JavaScript

$(document).ready(function() {
    $("#button").toggle(function() {
        $(this).text('Show Content');
    }, function() {
        $(this).text('Hide Content');
    }).click(function(){
        $("#hidden_content").slideToggle("slow");
    });
});

HTML

<a href="#" id="button" class="button_style">Hide content</a>
<div id="hidden_content">Content</div>

Use .animate() http://api.jquery.com/animate/与width set to toggle http://api.jquery.com/animate/#animation-properties.

jsFiddle 演示 http://jsfiddle.net/itay1989/dRpWv/309/

$("#hidden_content").animate({width: 'toggle'}, "slow");

• P.S - 请注意，我添加了一个发生变化的 CSS 设置#hidden_content的显示为inline-block，因为 a 的默认宽度div (a blockelement) 是 100%，这样动画就有点奇怪了。

动画属性和值 http://api.jquery.com/animate/#animation-properties

...

除了数值之外，每个属性还可以采用字符串 “显示”、“隐藏”和“toggle'。这些快捷键允许自定义 隐藏和显示考虑显示类型的动画 的元素。为了使用jQuery的内置切换状态 跟踪时，“toggle”关键字必须一致地作为值给出 正在动画化的属性。