Содержимое слайдера автоигра jQuery

Question

Мне нужно создать один слайдер линии для автоматического поворота списка h3.

Я создал обертку и внутренние элементы. Теперь у меня есть функция, чтобы показать один элемент, скрыть все другое. После задержки я пытаюсь поймать следующий элемент и показать его.

Стараюсь

(function($) { 
 
    $(document).ready(function() { 
 
    function context(obj, func) { 
 
     return function() { 
 
     func(obj); 
 
     } 
 
    }; 
 
    var bestNews = { 
 
     i: 0, 
 
     init: function(id) { 
 
     this.items = $(id); 
 
     this.item = this.items[this.i]; 
 
     return this; 
 
     }, 
 
     run: function() { 
 
     var next = context({ 
 
      obj: this 
 
     }, function(data) { 
 
      data.obj.i++; 
 
      if (data.obj.i >= data.obj.items.length) { 
 
      data.obj.i = 0; 
 
      } 
 
      data.obj.item = data.obj.items[data.obj.i]; 
 

 
      var next_run = context({ 
 
      obj: data.obj 
 
      }, function(data) { 
 
      data.obj.run(); 
 
      }); 
 
      $(data.obj.item).show('drop', { 
 
      direction: 'left' 
 
      }, 1000, next_run); 
 
     }); 
 
     $(this.item).delay(6000).effect('drop', { 
 
      direction: 'right' 
 
     }, 1000, next); 
 
     } 
 
    } 
 
    bestNews.init('.slideshoww h3').run(); 
 

 
    }); 
 
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="slideshoww"> 
 
    <h3>Text 1</h3> 
 
    <h3>Text 2</h3> 
 
    <h3>Text 3</h3> 
 
</div>

Но есть ошибка ...

Uncaught TypeError: $(...).delay(...).effect is not a function

Answer 1

.effect() является функцией jquery ui, вы должны включить его в свой проект

.effect() [.effect(effect [, options ] [, duration ] [, complete ])]

Description: Apply an animation effect to an element.

Returns: jQuery object

Вот рабочий фрагмент с хорошей версией jQuery-ui: [ "$ (...) эффект не является функцией" Jquery]

(function($) { 
 
    $(document).ready(function() { 
 
    function context(obj, func) { 
 
     return function() { 
 
     func(obj); 
 
     } 
 
    }; 
 
    var bestNews = { 
 
     i: 0, 
 
     init: function(id) { 
 
     this.items = $(id); 
 
     this.item = this.items[this.i]; 
 
     return this; 
 
     }, 
 
     run: function() { 
 
     var next = context({ 
 
      obj: this 
 
     }, function(data) { 
 
      data.obj.i++; 
 
      if (data.obj.i >= data.obj.items.length) { 
 
      data.obj.i = 0; 
 
      } 
 
      data.obj.item = data.obj.items[data.obj.i]; 
 

 
      var next_run = context({ 
 
      obj: data.obj 
 
      }, function(data) { 
 
      data.obj.run(); 
 
      }); 
 
      $(data.obj.item).show('drop', { 
 
      direction: 'left' 
 
      }, 1000, next_run); 
 
     }); 
 
     $(this.item).delay(6000).effect('drop', { 
 
      direction: 'right' 
 
     }, 1000, next); 
 
     } 
 
    } 
 
    bestNews.init('.slideshoww h3').run(); 
 

 
    }); 
 
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> 
 

 
<div class="slideshoww"> 
 
    <h3>Text 1</h3> 
 
    <h3>Text 2</h3> 
 
    <h3>Text 3</h3> 
 
</div>