javascript - 简化 jquery slideup 循环

Question

我目前正在使用 jquery 开发文本 slider 。

代码依赖于滑动切换和淡入淡出的协同工作。

示例代码在这里https://codepen.io/fja3omega/pen/GwVYXM

我的 jQuery 是:

jQuery( document ).ready(function() {
    jQuery.fn.slideFadeToggle  = function(speed, easing, callback) {
        return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
    }; 
    var counted = 1;
    jQuery(".slidem").find( "#rotate1" ).slideFadeToggle();
    setInterval(function(){
        counted = counted + 1;
        torotate = "#rotate" + counted;
        if(counted!=5) {
            jQuery(".slidem").find( torotate ).slideFadeToggle();
        } else {
            counted = 1;
            jQuery(".slidem .rotater" ).show();
            jQuery(".slidem").find( "#rotate1" ).slideFadeToggle();
            jQuery(".slidem").find( "#rotate5" ).show();
        }
    }, 3000);
});

我想知道是否有一种方法可以缩短或简化 jQuery。

Answer 1

是的，您可以简化和改进您的代码，删除所有不必要的 id 和 class 属性。此外，您还可以使您的代码更加抽象，以支持任意数量的“幻灯片”，而不仅仅是 5 个。

请看下面的片段:

jQuery(document).ready(function() {
  jQuery.fn.slideFadeToggle = function(speed, easing, callback) {
    return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
  };
  var n = 0, slides = jQuery('.slidem > div');
  (function slide() {
    n = n * (n < slides.length) || +!slides.show();
    slides.eq(n++).slideFadeToggle();
    setTimeout(slide, 1000);
  })()
});

.irotate {
  text-align: center;
  margin: 0 auto;
  padding: 10% 0;
  display: block;
}

.thisis {
  display: inline-block;
  vertical-align: middle;
  height: 20px;
}

.slidem {
  overflow: hidden;
  text-align: center;
  min-width: 90px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="irotate">
  <div class="thisis">This is a&nbsp;</div>
  <div class="thisis slidem">
    <div>&nbsp;</div>
    <div>simple</div>
    <div>super easy</div>
    <div>fun</div>
    <div>working</div>
  </div>
  <div class="thisis">&nbsp;Text Slider</div>
</div>