的slideToggle jQuery来留下

我是新的JQ 我有这个剧本我发现在互联网上，右其做什么，我需要，但我想滑动将从向左我如何做正确的它？请帮助的slideToggle jQuery来留下

这是代码

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

来源

2013-06-24 benjo

我已经添加了一个答案，请看看。 –

你可以用做additional effects as a part of jQuery-ui

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

Test Link

来源

2013-06-24 08:48:18

[你也可以设置'direction：'right''给它]（http://jsfiddle.net/Spokey/qEjXj/5 /） – Spokey

这与方向选项一起，是最好的答案。 –

试试这个：

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

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

来源

2013-06-24 08:45:59

或者你可以阅读这个伟大的教程： http：//www.learningjquery。com/2009/02/slide-elements-in-different-directions –

这需要jQuery UI –

我知道这已经过了一年，因为这是被问到的，但只是为了访问这个页面的人，我发布了我的解决方案。

使用什么@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

来源

2014-12-09 08:48:42 Spyros

请试试这个代码

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

来源

2014-12-18 07:09:54 w3debugger

除非您使用jQuery UI，否则此代码不会执行任何操作。所有你得到的默认选项是'慢'和'快' –

此外，这段代码会抛出语法错误，因为'animate'参数应该作为一个对象传递（你错过了'{}'）。 – vard

这将是一个更好的答案，如果它包含解释和代码。 –

包括jQuery和jQuery UI的插件，并尝试这种

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

来源

2016-04-30 10:46:41 Anbarasan

试试这个

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

来源

2016-11-16 09:07:41 Souvik

我会建议你使用下面的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-24 12:42:33

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

来源

2018-01-16 16:25:02 AlexanderPop

请添加更多描述 –

感谢您使用此代码段，这可能会提供一些有限的即时帮助。一个[正确的解释]（https://meta.stackexchange.com/q/114762）将通过说明为什么这是一个很好的解决方案，并使其对未来的读者更有用，从而大大提高其长期价值，类似的问题。请[编辑]（https://meta.stackoverflow.com/posts/360251/edit）您的答案添加一些解释，包括您所做的假设。 [参考文献]（https://meta.stackoverflow.com/a/360251/8371915） – user8371915

的slideToggle jQuery来留下

回答

相关问题