@thorikiriのてょりっき

@thorikiriがWebとかAndroidとかの技術ネタや本を読んだブログです

要素を順番にSlideDown, SlideUpするjQueryプラグインを作ってみた

jQuery

ul liの要素で先頭だけ表示させておいて、クリックすると他の要素が次々にSlideDownで表示させるようなjQueryのプラグインを作ってみました。
本体のコードはこちら。

;(function($) {
	$.fn.slideSequential = (function() {
		return function(option) {
			var defaults = {
					slidetime: 500,
					sleeptime: 300,
					element: 'li'
				},
				config = $.extend({}, defaults, option);

			function slideDownNext($target) {
				var $next = $target.next();
				if ($next) {
					$next.slideDown(config.slidetime, function() {
						setTimeout(function() {
							slideDownNext($next);
						}, config.sleeptime);
					});
				}
			};

			function slideUpNext($target) {
				var $prev = $target.prev();
				if ($prev && $prev.length > 0) {
					$target.slideUp(config.slidetime, function() {
						setTimeout(function() {
							slideUpNext($prev);
						}, config.sleeptime);
					});
				}
			};

			return this.each(function() {
				var that = $(this);
				that.data('toggle', true);
				that.find(config.element).hide().first().show().on('click', function() {
					var toggle = that.data('toggle');
					if (toggle) {
						slideDownNext($(this));
						that.data('toggle', false);
					} else {
						slideUpNext(that.find(config.element).last());
						that.data('toggle', true);
					}
				});
			});
		};
	})();
})(jQuery);

使うためのHTMLとJavaScriptはこちら。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="js/jquery-1.8.1.js" ></script>
    <script type="text/javascript" src="js/slideSequential.js"></script>
    <script type="text/javascript">
    (function() {
        $(function() {
            $('.list').slideSequential();
        });
    })();
    </script>
    <style type="text/css">
      .list li {
        border: solid 1px #cccccc;
        margin-bottom: 1px;
        padding: 5px;
        list-style: none;
      }
      .list.a li {
        background-color: rgba(255, 204, 204, .5);
      }
      .list.a li:first-child {
        background-color: rgba(255, 204, 204, 1.0);
      }
      .list.b li {
        background-color: rgba(204, 204, 255, .5);
      }
      .list.b li:first-child {
        background-color: rgba(204, 204, 255, 1.0);
      }
    </style>
  </head>
  <body>
    <ul class="list a">
      <li>aaaaaaaaa</li>
      <li>bbbbbbbbb</li>
      <li>ccccccccc</li>
      <li>ddddddddd</li>
      <li>eeeeeeeee</li>
      <li>fffffffff</li>
      <li>ggggggggg</li>
      <li>hhhhhhhhh</li>
    </ul>
    <ul class="list b">
      <li>aaaaaaaaa</li>
      <li>bbbbbbbbb</li>
      <li>ccccccccc</li>
      <li>ddddddddd</li>
      <li>eeeeeeeee</li>
      <li>fffffffff</li>
      <li>ggggggggg</li>
      <li>hhhhhhhhh</li>
    </ul>
  </body>
</html>

基本的には、$(ulなどの親要素).slideSequential();で使えます。オプションを与えることも出来ます。

  • slidetime
    • SlideDown、SlideUpする時間をmsで指定。デフォルトは500ms。
  • sleeptime
    • 次の要素をSlideDown、SlideUpするまでの待ち時間をmsで指定。デフォルトは300ms。
  • element
    • 子要素のセレクタを指定。デフォルトはli。

注意事項

  • Chromeでしか確認してません。
  • 連続でクリックしてしまうとおかしなことになります。
  • デモはありません。