質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

解決済

ページネイションを2回クリックすると要素が消えてしまう

southern_flavor
southern_flavor

総合スコア69

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1回答

0評価

0クリップ

1927閲覧

投稿2016/07/25 02:49

タイトルの通りの現象が起こってしまいます。
jqueryのスライダープラグインで
ページネイションをクリックしたときに起こるのですが
最初にクリックした時点では通常通り動きますが、もう一回同じところを
クリックすると右から左へとアニメーションが発生すると共に消えてしまいます。

解決策をご存知の方、いらっしゃいますか?

下記コードはコピペだけで動くようにしています。
(html、css、JSを分割していません)

html

<!doctype html> <html> <head> <meta charset="UTF-8"> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <title></title> <style> .jquery-slider-pages { overflow: visible; position: absolute; left: 0; bottom: 0; height: 14px; right: 0; } .jquery-slider-page { overflow: hidden; position: relative; display: block; float: right; width: 10px; height: 10px; border:1px solid #E3FFE3; background: #333; cursor: pointer; margin:2px; border-radius: 50%; } .jquery-slider-page:hover { background: #c0c0c0; } .jquery-slider-page-current { background: #c0c0c0; } .jquery-slider-control { position: absolute; text-align:center; width: 20px; color:#000; background: #fff; line-height: 40px; font-size: 4em; font-weight: normal; cursor: pointer; z-index:9000; overflow:hidden; margin:0px -10px 0 -10px; opacity:0.8; } .jquery-slider-control-prev { left: 6px; top:150px; border-radius:0px 3px 3px 0px; } .jquery-slider-control-next { right: 6px; top:150px; border-radius:3px 0 0 3px; } .jquery-slider { overflow: hidden; position: relative; } .jquery-slider-element { overflow: hidden; display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } #slider { position: absolute; width:200px; height:100px; backgrond:#B1B1B1; } #slider div { width:200px; height:100px; backgrond:#B1B1B1; } </style> <script> (function($) { $.fn.slider = function(options) { var $this = this; var settings = { 'width': this.width(), 'height': this.height(), 'wait': 4000, 'fade': 750, 'direction': 'left', 'showControls': true, 'showProgress': true, 'hoverPause': true, 'autoplay': true, 'randomize': false, 'slidebefore': function() {}, 'slideafter': function() {}, 'rewind': function() {} }; var _timer = false; var _last = false; var _this = false; var _cycle = function() { clearTimeout(_timer); _last = _this; if (settings.direction == 'right') { _this = _this.prev('.jquery-slider-element'); } else { _this = _this.next('.jquery-slider-element'); } if (!_this.length) { _rewind(); } _draw(); if (!$this.hasClass('jquery-slider-paused') && settings.autoplay) { _timer = setTimeout(_cycle, settings.wait); } }; var _rewind = function() { if (settings.direction == 'right') { _this = $this.children('.jquery-slider-element').last(); } else { _this = $this.children('.jquery-slider-element').first(); } settings.rewind(_this, $this); }; var _draw = function() { $this.addClass('jquery-slider-sliding'); if (settings.showProgress) { $this.find('.jquery-slider-page').removeClass('jquery-slider-page-current'); $this.find('.jquery-slider-page:eq(' + (_this.nextAll('.jquery-slider-element').length) + ')').addClass('jquery-slider-page-current'); } settings.slidebefore(_this, $this); if (settings.direction == 'right') { _this.show().css('left', -settings.width); } else { _this.show().css('left', settings.width); } _this.stop(true, true).animate({ 'left': (settings.direction == 'right' ? '+=' : '-=') + settings.width + 'px' }, { 'duration': settings.fade, 'complete': function() { settings.slideafter(_this, $this); $this.removeClass('jquery-slider-sliding'); } }); if (_last) { _last.stop(true, true).animate({ 'left': (settings.direction == 'right' ? '+=' : '-=') + settings.width + 'px' }, { 'duration': settings.fade }); } }; var _next = function() { if ($this.hasClass('jquery-slider-sliding')) return; var direction = settings.direction; $this.addClass('jquery-slider-paused'); settings.direction = 'left'; _cycle(); settings.direction = direction; }; var _prev = function() { if ($this.hasClass('jquery-slider-sliding')) return; var direction = settings.direction; $this.addClass('jquery-slider-paused'); settings.direction = 'right'; _cycle(); settings.direction = direction; }; var _init = function() { if (options) { $.extend(settings, options); } if (settings.hoverPause) { $this.bind({ 'mouseenter': function() { $this.addClass('jquery-slider-paused') clearTimeout(_timer); }, 'mouseleave': function() { $this.removeClass('jquery-slider-paused'); if (settings.autoplay) { _timer = setTimeout(_cycle, settings.wait); } } }); } var positionEls = $('<span class="jquery-slider-pages"></span>'); $this.addClass('jquery-slider').width(settings.width).height(settings.height); $this.children().each(function() { var $tmp = $(this); _this = $(this).addClass('jquery-slider-element'); positionEls.prepend($('<span class="jquery-slider-page"></span>').on('click', function() { if ($this.hasClass('jquery-slider-sliding')) return; _last = _this; _this = $tmp; _draw(); })); }); if (settings.showProgress) { $this.append(positionEls); } if (settings.showControls) { var controlPrev = $('<span class="jquery-slider-control jquery-slider-control-prev">&#139;</span>').css('cursor','pointer').bind('click', function() { _prev(); }); var controlNext = $('<span class="jquery-slider-control jquery-slider-control-next">&#155;</span>').css('cursor','pointer').bind('click', function() { _next(); }); $this.append(controlPrev); $this.append(controlNext); } if (settings.randomize) { _this = $this.children('.jquery-slider-element').eq(parseInt($this.children('.jquery-slider-element').length * Math.random())); } _cycle(); }; _init(); }; })(jQuery); </script> </head> <body> <script> jQuery(function($) { $('#slider').slider({ showControls: true, autoplay: true, showPosition: true, hoverPause: true, wait: 2500, fade: 300, direction: "left" }); }); </script> <div id="slider"> <div>1</div> <div>2</div> <div>3</div> </div> </body> </html>

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

kei344

2016/07/25 03:49

スライダープラグインは自作のものでしょうか。そうでなければ入手元URLを記載ください。
southern_flavor

2016/07/25 03:55

このプラグインは昔、MIT licenseで某サイトにあり(コード内に著作権表示なし)、現在はサイトごと消されてまして、URLをのせることができなくなってしました。
southern_flavor

2016/07/25 04:02

名称はdiv slider2というものだった思います。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。