25

我是 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>
4

10 回答 10

26

您可以使用附加效果作为 jQuery-ui 的一部分来做到这一点

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

测试链接

于 2013-06-24T08:48:18.247 回答
14

试试这个：

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

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

于 2013-06-24T08:45:59.433 回答
6

请尝试此代码

$(this).animate({'width': 'toggle'});
于 2014-12-18T07:09:54.403 回答
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)

为了clearQueue和jumpToEnd。在此处阅读有关 jQuery 的信息

于 2014-12-09T08:48:42.493 回答
4

试试这个

$('.slidingDiv').toggle("slide", {direction: "right" }, 1000);
于 2016-11-16T09:07:41.227 回答
4 
$("#mydiv").toggle(500,"swing");

more https://api.jquery.com/toggle/
于 2018-01-16T16:25:02.887 回答
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;- 您将看到菜单从右下角滑动。

于 2017-02-24T12:42:33.473 回答
1

包括 Jquery 和 Jquery UI 插件并试试这个

 $("#LeftSidePane").toggle('slide','left',400);
于 2016-04-30T10:46:41.683 回答
1

你可以试试这个：

$('.show_hide').click(function () {
    $(".slidingDiv").toggle("'slide', {direction: 'right' }, 1000");
});
于 2019-11-01T19:44:39.957 回答
0

我挣扎了toggle('slide')几个slideToggle小时。

我得到的结论：

  • toggle('slide')只能隐藏元素from right to left，即显示它from left to right
  • slideToggle只能隐藏元素from bottom to top，这意味着显示它from top to bottom

如果你想自由定义收缩方向，你必须使用slide effect来自jQuery UI https://api.jqueryui.com/slide-effect/?rdfrom=http://docs.jquery.com/mw/index.php ?title=UI/效果/幻灯片&redirect=no

例如：

$element.toggle('slide', { direction: 'left/right/up/down' }, 1000)
于 2021-05-15T17:21:31.080 回答