从左侧隐藏/显示

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

在width设置为.animate()的情况下使用toggle。

jsFiddle Demo

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

• PS - 注意我添加了一个CSS设置，将 #hidden_content 的显示更改为inline-block，因为 div的默认宽度（一个块元素）是100％，动画有点奇怪。

---

  

Animation Properties and Values

     

...

     

除了数值之外，每个属性都可以使用字符串   'show'，'hide'和' toggle '。这些快捷方式允许自定义   隐藏和显示考虑显示类型的动画   元素。为了使用jQuery的内置切换状态   跟踪，'toggle'关键字必须始终作为值给出   动画的属性。

Answer 2

你可以这样做：

$(document).ready(function() {
    $("#button").toggle(function() {
        $(this).text('Show Content');
        $("#hidden_content").animate({left: "-50px"}, 500);        
    }, function() {
        $(this).text('Hide Content');
        $("#hidden_content").animate({left: "0px"}, 500);
    })
});

演示Fiddle

Answer 3

你可以使用jquery Ui的幻灯片效果。 http://api.jqueryui.com/slide-effect/