web-dev-qa-db-ja.com

slideToggle JQueryを右から左に

私は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>
jquerytoggleright-to-left
20
benjo

jQuery-uiの一部としての追加の効果 を使用してこれを行うことができます。

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

リンクのテスト

23
ta-run

これを試して：

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

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

14
McCartney

このコードを試してください

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

質問されてから1年が経ちましたが、このページにアクセスする人のためだけに、解決策を投稿しています。

ここで@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の停止について読む

5
Spyros
$("#mydiv").toggle(500,"swing");
3
AlexanderPop

以下の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;-右下隅からスライドするメニューが表示されます。

2
piyush singh

これを試して

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

jqueryおよびJquery UIプラグインを含めて、これを試してください

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