jQueryの左スライドショー

StackOverflow https://stackoverflow.com/questions/521291

  •  22-08-2019
  •  | 
  •  

質問

私は、下図のように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関数は、左側から画像を示す開始し、それが右側に向かって進行します。 の私は、同じことを行うが、左のの方に右側と進捗状況から開始するいくつかの方法を探しています。ありがとう！

EDIT

jQueryのインターフェイスは、私が必要とするように（私は基本的に彼らの「右でスライドを」必要と機能「左を引き出し」）何かを持っているが、私は、これはjQueryの1.3で動作することができませんでした：<のhref = "のhttp：/ /interface.eyecon.ro/demos/ifx.html」のrel = "noreferrer"> http://interface.eyecon.ro/demos/ifx.html を。また、彼らのデモは、同様に、それが唯一の百万のエラーをスローする前に、一度スライドを尽くすよう壊れているようです。

役に立ちましたか？

解決

この機能は、jQueryのUI http://docs.jquery.com/UIの一部として含まれています/エフェクト/スライドにあなたがあなた自身の名前でそれを拡張したい場合は、これを使用することができます。

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>

他のヒント

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

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);
}

追加の速度/コールバック引数を指定し、それは完全なドロップイン置換slideUp()とslideDown()ためです。

あなたがあなた自身のスクリプトファイルにこれらの行を追加して、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);
    });
}

あなたは速度を変更したいとコールバックを含む場合と、単にこのようにそれらを追加します：

        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);
                });
            }
        });
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top