1. ホーム
  2. jquery

[解決済み] jQueryの左スライドとショー

2022-10-14 18:14:57

質問

私は 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 Interfaceに私が必要としているものがあります(私は基本的に彼らの "slide in right" と "slide out left" 関数が必要です)、しかし私はこれをjQuery 1.3 で動作させることができませんでした。 http://interface.eyecon.ro/demos/ifx.html . また、彼らのデモは、それが百万のエラーを投げる前に一度だけスライドを行うように、同様に壊れているようです。

どのように解決するのですか?

この機能は、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>