web-dev-qa-db-ja.com

右から左にスライド？

Divを折りたたみ表示から展開表示へ（およびその逆へ）移動させるにはどうすればよいですか。

私が目にするもののほとんどは、常に左から右にあります。

jquerycssjquery-uiposition
373
Ryan Montgomery
$("#slide").animate({width:'toggle'},350);

参照： https://api.jquery.com/animate/

358
JQGeek

これはjQueryUIのhide/showメソッドを使用してネイティブに実現できます。例えば。

    // To slide something leftwards into view,
    // with a delay of 1000 msec
    $("div").click(function () {
          $(this).show("slide", { direction: "left" }, 1000);
    });

参照： http://docs.jquery.com/UI/Effects/Slide

227
EnGassa

これを使って：

$('#pollSlider-button').animate({"margin-right": '+=200'});

ライブデモ

改良版

ダブルクリック時のダブルマージンを防ぐために、デモにいくつかのコードが追加されました。 http://jsfiddle.net/XNnHC/942/

緩和とそれを使用してください。）

http://jsfiddle.net/XNnHC/1591/

  • 余分なJavaScriptコードは削除されました。

  • クラス名といくつかのCSSコードが変更されました

  • 展開されているか折りたたまれているかを調べる機能が追加されました

  • イージング効果を使うかどうかを変更

  • アニメーション速度を変更

http://jsfiddle.net/XNnHC/1808/

69
h0mayun

この実用的な例 を見てください。これは jQuery UI を使用します。これは私が最初から左から右に使用していた解決策ですが、私はそれを右から左に動作するように変更しました。

利用可能なパネル間でアニメーションを中断することなく、ユーザーはリンクを素早くクリックすることができます。

JavaScriptコードは単純です。

$(document).ready(function(){
    // Mostra e nascondi view-news
    var active = "europa-view";
    $('a.view-list-item').click(function () {
        var divname= this.name;
        $("#"+active ).hide("slide", { direction: "right" }, 1200);
        $("#"+divname).delay(400).show("slide", { direction: "right" }, 1200);
        active = divname;
    });
});

FiddleリンクでHTMLとCSSを入手してください。

効果的に表現するために、白い背景と左パディングを追加しました。

21
Erwin Julius

これを使って

<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script>
    $(document).ready(function(){
        $("#flip").click(function () {
            $("#left_panel").toggle("slide", { direction: "left" }, 1000);
        });
    });
</script>
16
Shwet
$(function() {
  $('.button').click(function() {
    $(this).toggleClass('active');
    $('.yourclass').toggle("slide", {direction: "right"}, 1000);
  });
});
9
Hil

私はこうやった：

var btn_width = btn.width();
btn.width(0);
btn.show().animate({width: btn_width}, {duration: 500});

ノード "btn"はアニメーションの前に隠されるべきで、あなたはそれに "position：absolute"を設定する必要があるかもしれないことに注意してください。

7
WallTearer

最初に要素の幅を0、右に浮動、次に表示しようとしているイベントに定義することができます。

$('#the_element_to_slide_from_right_left').animate({ width:'your desired width' }, 600);

そのような単純な。

4
Teody C. Seguin

言及する価値のあるもう1つのライブラリは animate.css です。それはjQueryとうまく働きます、そして、あなたは単にCSSクラスを切り替えることによって多くの面白いアニメーションをすることができます。

好きです。

$（ "＃slide"）。toggle（）。toggleClass（ 'animated bounceInLeft'）;

4
Soichi Hayashi

GreenSockアニメーションプラットフォーム（GSAP）TweenLiteTweenMaxを使用すると、jQueryまたはCSS3の遷移よりもはるかにカスタマイズが簡単になり、よりスムーズに遷移します。 TweenLite/TweenMaxでCSSプロパティをアニメートするためには、 "CSSPlugin"と呼ばれるプラグインも必要です。 TweenMaxはこれを自動的に含みます。

まず、TweenMaxライブラリをロードします。 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>

または軽量版のTweenLite： 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/easing/EasePack.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenLite.min.js"></script>

それでは、アニメーションを呼び出します。 

 var myObj= document.getElementById("myDiv");

// Syntax: (target, speed, {distance, ease})
 TweenLite.to(myObj, .7, { x: 500, ease: Power3.easeOut});

IDセレクタを使って呼び出すこともできます。 

 TweenLite.to("#myID", .7, { x: 500, ease: Power3.easeOut});

jQueryをロードしている場合は、特定のクラスを含むすべての要素のように、より高度な広範なセレクタを使用できます。 

 // This will parse the selectors using jQuery's engine.
TweenLite.to(".myClass", .7, { x: 500, ease: Power3.easeOut});

詳細については、 TweenLiteドキュメントを参照してください。

彼らのウェブサイトによると、_/"TweenLiteは、GreenSock Animation Platform（GSAP）の基盤として機能する非常に高速で軽量、そして柔軟なアニメーションツールです。"

4
TetraDev

右から左へのアニメーションの例 jQuery UIなし 、jQueryのみ（任意のバージョン、 https://api.jquery.com/animate/ を参照）.

$(document).ready(function() {
  var contentLastMarginLeft = 0;
  $(".wrap").click(function() {
    var box = $(".content");
    var newValue = contentLastMarginLeft;
    contentLastMarginLeft = box.css("margin-left");
    box.animate({
      "margin-left": newValue
    }, 500);
  });
});
.wrap {
  background-color: #999;
  width: 200px;
  overflow: hidden;
}
.content {
  width: 100%;
  margin-left: 100%;
  background-color: #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  click here
  <div class="content">
    I would like to have a div go from collapsed to expanded (and vice versa), but do so from right to left. Most everything I see out there is always left to right.
  </div>
</div>
4
fremail

ここで例を確認してください。

$("#slider").animate({width:'toggle'});

https://jsfiddle.net/q1pdgn96/2/ /

3
rafaelferreir4

私がスクロールを使って行った例（ちょうどHTML、CSS、JS、jqueryライブラリを使った）。 下にスクロールするとボタンが左にスライドします。

また、私があなたが欲しいのがこの効果だけであるならば、私はあなたにそれが重すぎるのでjQuery UIを使わないでください（あなたがそれをそれのために使いたいだけなら）。

$(window).scroll(function(){
  if ($(this).scrollTop() > 100) {
          event.preventDefault();
          $(".scrollToTop").css({'transform': 'translate(0px, 0px)'});
      } else {
          $(".scrollToTop").css({'transform': 'translate(40px, 0px)'});
      }
  });

チェック この例

1
Jordi Vicens

またはあなたが使用することができます

$('#myDiv').toggle("slide:right");
0
6563cc10d2

あなたのdivが絶対位置にあり、あなたが幅を知っているなら、あなたはただ使うことができます：

#myDiv{
position:absolute;
left: 0;
width: 200px;
}

$('#myDiv').animate({left:'-200'},1000);

それは画面からそれをスライドさせます。

あるいは、それをコンテナにラップすることもできますdiv

#myContainer{
position:relative;
width: 200px;
overflow: hidden;
}

#myDiv{
position:absolute;
top: 0;
left: 0;
width: 200px;
}

<div id="myContainer">

<div id="myDiv">Wheee!</div>

</div>

$('#myDiv').animate({left:'-200'},1000);
0
freeworlder