jquery - 从左边隐藏/显示

Question

我有这个代码可以隐藏/显示。我希望 div 在向左移动时隐藏。我怎样才能做到这一点？ This is what I have FIDDLE

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>

Answer 1

使用.animate()将 width 设置为 toggle .

jsFiddle Demo

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

• P.S - 注意我添加了一个 CSS 设置，将 #hidden_​​content 的显示更改为 inline-block，因为默认宽度div(block 元素)的比例为 100%，这样动画有点奇怪。

---

Animation Properties and Values

...

In addition to numeric values, each property can take the strings 'show', 'hide', and 'toggle'. These shortcuts allow for custom hiding and showing animations that take into account the display type of the element. In order to use jQuery's built-in toggle state tracking, the 'toggle' keyword must be consistently given as the value of the property being animated.