111

以下に示すように、 and と同様に機能するいくつかの関数を使用して、andとjQuery呼ばれる効果を拡張しました。ただし、 andも実装したいと思います。 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 回しか実行しません。

4

4 に答える 4

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>
于 2009-02-06T18:10:43.010 に答える
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()ます。

于 2009-09-29T13:50:03.047 に答える
10

fadeSlideRight()独自のスクリプトファイルにこれらの行を追加することで、jQueryライブラリに新しい関数を追加でき、とを簡単に使用できます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);
    });
}
于 2012-07-10T07:27:12.123 に答える
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);
                });
            }
        });
于 2013-01-31T00:18:45.430 に答える