9

我有这个代码可以隐藏/显示。我希望 div 在向左移动时隐藏。我怎样才能做到这一点？这就是我的 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>
4

3 回答 3

12

.animate()与width设置为 一起使用toggle。

jsFiddle 演示

$("#hidden_content").animate({width: 'toggle'}, "slow");
  • PS - 请注意，我添加了一个 CSS 设置，将#hidden_content' 的显示更改为inline-block，因为div（块元素）的默认宽度是 100% 并且动画有点奇怪。

动画属性和值

...

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

于 2013-09-19T06:26:56.283 回答
3

你可以这样做：

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

演示小提琴

于 2013-09-19T06:33:54.633 回答
0

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

于 2013-09-19T06:36:29.300 回答