的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來留下

回答

相關問題