jQueryを左にスライドして表示


111

私は、拡張jQueryと呼ばれる効果をslideRightShow()してslideLeftHide()と同様にその仕事をカップルの機能を持つslideUp()slideDown()下図のように。しかし、私はまた、実装したいslideLeftShow()slideRightHide()

私は(私は別の大規模なセットの追加を回避したいもののこのタイプを提供してかなりのライブラリがあります知っているjavascriptファイル)をすることができますが、誰もがいずれかの実装方法の簡単な例を提供slideLeftShow()またはslideRightHide()

jQuery.fn.extend({
  slideRightShow: function() {
    return this.each(function() {
      jQuery(this).animate({width: 'show'});
    });
  },
  slideLeftHide: function() {
    return this.each(function() {
      jQuery(this).animate({width: 'hide'});
    });
  },
  slideRightHide: function() {
    return this.each(function() {
      ???
    });
  },
  slideLeftShow: function() {
    return this.each(function() {
      ???
    });
  }
});

上記のslideRightShow関数は、左側から画像を表示し始め、右側に向かって進みます。 同じことをする方法を探していますが、右側から始めて左側に進みます。ありがとう!

編集

jQueryインターフェースには私が必要とするようなものがあります(基本的には「スライドイン」と「スライドアウト」機能が必要です)が、これをjQuery 1.3で動作させることができませんでした:http : //interface.eyecon.ro/demos /ifx.html。また、彼らのデモは壊れているようで、100万のエラーをスローする前にスライドを1回しか実行しません。


私は私の投稿を更新しました。これが役立つことを願っています
bendewey

回答:


185

この機能は、jquery ui http://docs.jquery.com/UI/Effects/Slideの一部として含まれています。独自の名前で拡張したい場合は、これを使用できます。

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

次の参照が必要になります

<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>

こんにちは!そこで実装したものの逆を探しています。基本的に、上記の要素を使用して要素を表示すると、左側が最初に表示され、右側に向かって進みます。私はそれを右側から始め、左側に向かって進むようにしています。
Wickethewok、2009

1
要素を正しくフロートすると機能します。さもないと。左のプロパティをアニメートし、縮小するときに要素を移動することができます。
bendewey 2009

1
要素を「右」にフロートするように変更しても、スライドは反転しませんでした。それが役立つ場合は、上記で明確にしました。
Wickethewok、2009

2
どうもありがとうございます!これがjQueryの効果の一部であることを知りませんでした。できれば+2をあげよう!
Wickethewok、2009

4
2つのuiスクリプトのソースのリンクは次のとおりです。jquery
ui.googlecode.com/

34

パディングとマージンを忘れないでください...

jQuery.fn.slideLeftHide = function(speed, callback) { 
  this.animate({ 
    width: "hide", 
    paddingLeft: "hide", 
    paddingRight: "hide", 
    marginLeft: "hide", 
    marginRight: "hide" 
  }, speed, callback);
}

jQuery.fn.slideLeftShow = function(speed, callback) { 
  this.animate({ 
    width: "show", 
    paddingLeft: "show", 
    paddingRight: "show", 
    marginLeft: "show", 
    marginRight: "show" 
  }, speed, callback);
}

speed / callback引数が追加されたので、slideUp()およびの完全な置き換えになりslideDown()ます。


右スライドで同じ効果を発揮させるにはどうすればよいですか?
Jayant Varshney、2014年

@JayantVarshney:ブロックが右寄せされていることを確認してください。このコードは幅を縮小するだけです。あなたのCSSはそれを扱うことができる場合は、右側のスライドを持っています
vdboor

ありがとう...しかし、同じdivに両方の効果が必要です。右から左に開いてから左から右に閉じる、またはその逆のように...
Jayant Varshney

それでは、完了コールバックでクラスを切り替えるのはどうですか?:-)
vdboor 2014年

おかげで、私はCSS3アニメーションを使用してこの機能を実現しました
Jayant Varshney

9

独自のスクリプトファイルにこれらの行を追加して、jQueryライブラリに新しい機能を追加することができますし、簡単に使用することができるfadeSlideRight()fadeSlideLeft()

注:750pxのインスタンスを好きなようにアニメーションの幅を変更できます。

$.fn.fadeSlideRight = function(speed,fn) {
    return $(this).animate({
        'opacity' : 1,
        'width' : '750px'
    },speed || 400, function() {
        $.isFunction(fn) && fn.call(this);
    });
}

$.fn.fadeSlideLeft = function(speed,fn) {
    return $(this).animate({
        'opacity' : 0,
        'width' : '0px'
    },speed || 400,function() {
        $.isFunction(fn) && fn.call(this);
    });
}

1
これはまさにjQuery UIを含めずに必要なものです。パラメータとして不透明度と幅を追加しました。... = function(opacity, speed, width, fn) {...}
ディランヴァレード2014

1
これは断然最高のソリューションです。ライブラリを追加する必要はありません。ありがとうございました。
hosseio 2015

5

また、速度を変えてコールバックを含める場合は、次のように追加するだけです。

        jQuery.fn.extend({
            slideRightShow: function(speed,callback) {
                return this.each(function() {
                    $(this).show('slide', {direction: 'right'}, speed, callback);
                });
            },
            slideLeftHide: function(speed,callback) {
                return this.each(function() {
                    $(this).hide('slide', {direction: 'left'}, speed, callback);
                });
            },
            slideRightHide: function(speed,callback) {
                return this.each(function() {  
                    $(this).hide('slide', {direction: 'right'}, speed, callback);
                });
            },
            slideLeftShow: function(speed,callback) {
                return this.each(function() {
                    $(this).show('slide', {direction: 'left'}, speed, callback);
                });
            }
        });
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.