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

これが尋ねられてから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ストップについて読む

于 2014-12-09T08:48:42.493 に答える
4

これを試して

$('.slidingDiv').toggle("slide", {direction: "right" }, 1000);
于 2016-11-16T09:07:41.227 に答える
1

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

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