JQuery的slideToggle从右到左滑动

Question

JQuery的slideToggle从右到左滑动

29

我是JQ的新手，我在网上找到了这个脚本，它正好满足我的需求，但我希望滑动是从右到左的，我该怎么做？请帮忙。

以下是代码：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){

        $(".slidingDiv").hide();
        $(".show_hide").show();

    $('.show_hide').click(function(){
    $(".slidingDiv").slideToggle();
    });

});

</script>
<style>

.slidingDiv {
    height:300px;
    background-color: #99CCFF;
    padding:20px;
    margin-top:10px;
    border-bottom:5px solid #3399FF;
}

.show_hide {
    display:none;
}
</style>
</head>

<body>

<div class="slidingDiv">
Fill this space with really interesting content. <a href="#" class="show_hide">hide</a></div>
<a href="#" class="show_hide">Show/hide</a>

- benjo

11个回答

18

试试这个：

$(this).hide("slide", { direction: "left" }, 1000);

$(this).show("slide", { direction: "left" }, 1000);

- Aldi Unanto

2

或者您可以阅读这个很棒的教程： http://www.learningjquery.com/2009/02/slide-elements-in-different-directions - Aldi Unanto

16

需要 jQuery UI。 - Rune Vejen Petersen

5

请尝试使用这段代码

$(this).animate({'width': 'toggle'});

- w3debugger

4

除非你使用jQuery UI，否则此代码不起作用。你得到的所有默认选项都是'slow'和'fast'。 - Ryan Coolwebs

2

此外，由于 animate 参数应该作为对象传递（你缺少了 {}），因此这段代码将抛出语法错误。 - vard

1

如果这个答案附带了代码解释的话，那就更好了。 - John Hascall

5

我知道这个问题已经被问了一年，但为了那些即将访问此页面的人，我将发布我的解决方案。

通过使用@Aldi Unanto在这里提出的建议，下面是一个更完整的答案：

  jQuery('.show_hide').click(function(e) {
    e.preventDefault();
    if (jQuery('.slidingDiv').is(":visible") ) {
      jQuery('.slidingDiv').stop(true,true).hide("slide", { direction: "left" }, 200);
    } else {
      jQuery('.slidingDiv').stop(true,true).show("slide", { direction: "left" }, 200);
    }
  });

首先，我防止链接在点击时执行任何操作。然后，我添加了一个检查，以确定元素是否可见。如果可见，我将其隐藏。如果隐藏，我将其显示。您可以更改方向为左或右，并将持续时间从200毫秒更改为任何您喜欢的时间。

编辑：我还添加了

.stop(true,true)

为了清除队列并跳过到结束位置。在此处阅读有关jQuery stop的信息。

- Spyros

4

$("#mydiv").toggle(500,"swing");

more https://api.jquery.com/toggle/

- AlexanderPop

5

请添加更多描述。 - Alex Filatov

1

感谢您提供这段代码片段，它可能会提供一些有限的、即时的帮助。一个适当的解释将极大地提高其长期价值，因为它可以展示为什么这是一个好的解决方案，并使其对未来读者有其他类似问题的人更有用。请编辑您的答案以添加一些解释，包括您所做的假设。ref - Alper t. Turker

4

试试这个

$('.slidingDiv').toggle("slide", {direction: "right" }, 1000);

- Souvik

3

我花了数小时来理解toggle('slide')和slideToggle。

我得出的结论如下：

toggle('slide')只能将元素从右向左隐藏，也就是说将其从左向右显示。
slideToggle只能将元素从底部向上隐藏，也就是说将其从顶部向下显示。

如果您想自由定义收缩的方向，则必须使用来自jQuery UIhttps://api.jqueryui.com/slide-effect/?rdfrom=http://docs.jquery.com/mw/index.php?title=UI/Effects/Slide&redirect=no 的slide effect。

例如：

$element.toggle('slide', { direction: 'left/right/up/down' }, 1000)

- TorvaldsDB

2

包含Jquery和Jquery UI插件并尝试此操作。

 $("#LeftSidePane").toggle('slide','left',400);

- Anbu

2

我建议您使用以下CSS。

.showhideoverlay { 
  width: 100%;
  height: 100%;
  right: 0px;
  top: 0px;
  position: fixed;
  background: #000;
  opacity: 0.75;
}

您可以使用一个简单的切换函数：

$('a.open').click(function() {
  $('div.showhideoverlay').toggle("slow");
});

这将从右向左显示覆盖菜单。或者，您可以使用定位来更改效果，从顶部或底部开始，即使用bottom: 0;而不是top: 0; - 您将看到菜单从右下角滑动。

- piyush singh

1

你可以尝试这个：

$('.show_hide').click(function () {
    $(".slidingDiv").toggle("'slide', {direction: 'right' }, 1000");
});

- A.J

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- painotpi · Accepted Answer

您可以使用jQuery-ui的额外效果来完成此操作。

$('.show_hide').click(function () {
    $(".slidingDiv").toggle("slide");
});

测试链接