从左隐藏/显示 [英] Hide/Show from left

问题描述

我有可以隐藏/显示的代码.我希望div在向左移动时隐藏.我怎样才能做到这一点? 这就是我要玩的东西

I have this code with which I can hide/show. I want the div to hide while it moves left. How can I do that? This is what I have FIDDLE

$(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>

推荐答案

将 .animate() 与width设置为 toggle .

Use .animate() with the width set to toggle.

jsFiddle演示

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

• PS-注意，我添加了一个CSS设置，将 #hidden_content 的显示更改为inline-block，因为 div 的默认宽度( em> block 元素)为100％，那么动画就有点奇怪了.
• P.S - Notice I've added a CSS setting that changes #hidden_content's display to inline-block, because the default width of a div (a block element) is 100% and the animation is kind of weird that way.

动画属性和值

...

Animation Properties and Values

...

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

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.

这篇关于从左隐藏/显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！