Question

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

Answer 1

您可以使用additional effects as a part of jQuery-ui

执行此操作

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

Test Link

Answer 2

试试这个：

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

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

Answer 3

请尝试此代码

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

Answer 4

我知道自问这个问题已经过去了一年，但是对于那些要访问此页面的人我会发布我的解决方案。

使用@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。 Read about jQuery stop here

Answer 5

试试这个

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

Answer 6

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

Answer 7

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

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

Answer 8

我建议你使用下面的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; - 您将看到菜单从右下角滑动。

Answer 9

您可以尝试以下方法：

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

Answer 10

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

我得到的结论：

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

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

例如：

jQuery UI

slideToggle JQuery从右到左

10 个答案: