408

divを折りたたみから展開（およびその逆）に変更するにはどうすればよいですか？ただし、右から左に移動しますか？

私がそこに見るほとんどすべては常に左から右にあります。

4

16 に答える 16

393 
$("#slide").animate({width:'toggle'},350);

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

于 2009-03-05T15:20:58.987 に答える
243

これは、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

于 2012-02-14T17:27:29.463 に答える
77

これを使って：

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

ライブデモ

改良版

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

イージングで使用してください ;)

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

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

  • クラス名と一部の CSS コードが変更されました

  • 展開されているか折りたたまれているかを確認する機能を追加

  • イージング効果の有無を変更

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

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

于 2012-12-15T13:58:25.490 に答える
23

jQueryUIを使用するFiddleでのこの作業例を見てください。これは私が最初に左から右に使用していたソリューションですが、右から左に機能するように変更しました。

これにより、ユーザーは、使用可能なパネル間でアニメーションを中断することなく、リンクをすばやくクリックできます。

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を入手してください。

より良い効果の表現のために、白い背景と左パディングを追加しました。

于 2013-01-10T17:59:25.557 に答える
20

これを使って

<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>
于 2012-12-31T08:18:35.537 に答える
7

言及する価値のある別のライブラリはanimate.cssです。これは jQuery とうまく連携し、CSS クラスを切り替えるだけで多くの興味深いアニメーションを作成できます。

お気に入り..

$("#slide").toggle().toggleClass('アニメーション化されたbounceInLeft');

于 2016-11-11T15:25:24.767 に答える
7

私はこのようにしました：

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

ノード「btn」はアニメーションの前に非表示にする必要があることに注意してください。また、「position: absolute」をそれに設定する必要がある場合もあります。

于 2012-05-10T11:20:45.997 に答える
5

TweenLite/備えたGreenSock Animation Platform (GSAP)TweenMaxは、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 ドキュメントを参照してください。

同社の Web サイトによると、 「TweenLite は、GreenSock Animation Platform (GSAP) の基盤として機能する、非常に高速で軽量かつ柔軟なアニメーション ツールです。」

于 2015-11-05T18:10:24.523 に答える
5

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>

于 2016-05-27T15:45:53.393 に答える
4

最初に要素の幅を 0 として定義し、右に浮動させてから、それを表示しようとしているイベントで..次のようになります。

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

そのような単純な。

于 2013-05-30T07:37:58.173 に答える