javascript - jQuery を使用して左右のスライド効果を作成するにはどうすればよいですか?

Question

次の jQuery コード スニペットがあります。

var target1 = $('.div1');
var target2 = $('.div2');
target1.delay(1500).fadeIn();
target2.delay(3000).fadeIn();
// I want to use slide left here instead of .fadeIn()

.fadeIn()スライドの左右のオプションはありますか? に似ています。

私もこれを見つけましたが、それを実装する方法やそれが正しいかどうかはわかりません。

Answer 1

投稿したリンクのコードを使用してください。

必要なライブラリを含めます (またはローカル コピーを使用します)。

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.slide.js"></script>

この Javascript をページに追加します。

jQuery.fn.extend({
  slideRightShow: function(speed) {
    return this.each(function() {
        $(this).show('slide', {direction: 'right'}, +speed || 1000);
    });
  },
  slideLeftHide: function(speed) {
    return this.each(function() {
      $(this).hide('slide', {direction: 'left'}, +speed || 1000);
    });
  },
  slideRightHide: function(speed) {
    return this.each(function() {
      $(this).hide('slide', {direction: 'right'}, +speed || 1000);
    });
  },
  slideLeftShow: function(speed) {
    return this.each(function() {
      $(this).show('slide', {direction: 'left'}, +speed || 1000);
    });
  }
});

パラメーターを追加しspeedて、アニメーション化する速度を指定できるようにしました。

それ以降は、次のようなものを使用できます。

$("#element_id").slideRightShow();

デモ: http://jsfiddle.net/EzP2q/1/

Answer 2

ほら、これ見て！これはあなたが必要とするものです！

このツットはあなたが必要とするすべてを説明しています - >異なる方向に要素をスライドさせます

Answer 3

jQuery UI にはslide機能があります

ドキュメントをチェックする