javascript - jQuery 重置 newsticker 的先前效果而不是通过单击替换为新效果

Question

我正在使用这个 plugin , 简单的新闻行情。

代码运行正常。

HTML

<h2>fade pattern</h2>
<div id="ticker-fade" class="ticker">
<ul>
<li>パターン１　テスト１</li>
<li>パターン１　テスト２</li>
<li>パターン１　テスト３</li>
<li>パターン１　テスト４</li>
<li>パターン１　テスト５</li>
</ul>
</div><!--/#ticker -->

<h2>roll pattern</h2>
<div id="ticker-roll" class="ticker">
<ul>
<li>パターン２　テスト１</li>
<li>パターン２　テスト２</li>
<li>パターン２　テスト３</li>
<li>パターン２　テスト４</li>
<li>パターン２　テスト５</li>
</ul>
</div><!--/#ticker -->

<h2>slide pattern</h2>
<div id="ticker-slide" class="ticker">
<ul>
<li>パターン２　テスト１</li>
<li>パターン２　テスト２</li>
<li>パターン２　テスト３</li>
<li>パターン２　テスト４</li>
<li>パターン２　テスト５</li>
</ul>
</div><!--/#ticker -->

和 JS:

$(function(){
$.simpleTicker($("#ticker-fade"),{'effectType':'fade'});
  $.simpleTicker($("#ticker-roll"),{'effectType':'roll'});
  $.simpleTicker($("#ticker-slide"),{'effectType':'slide'});
  $.simpleTicker($("#ticker-one-item"),{'effectType':'fade'});
});

现在我需要通过点击改变行情效果。

<div id="update">Update</div>

JS:

$('#update').on('click', function()
{
    $.simpleTicker($("#ticker-fade"),{'effectType':'roll'});
});

但是当我点击它时，效果是2，淡化和滚动。

我的问题是，是否可以重置之前的效果而不是通过点击将其替换为新效果？

Answer 1

我没有看到与此相关的任何文档，因此这是一个替代解决方案。

您可以使用 .clone() 在需要更改效果的地方保留 div 的克隆。然后，无论何时单击更新按钮，您都可以用克隆的替换原始文件，然后应用 roll 效果。

演示代码:

(function($) {
  $.simpleTicker = function(element, options) {
    var defaults = {
      speed: 1000,
      delay: 3000,
      easing: 'swing',
      effectType: 'slide'
    }

    var param = {
      'ul': '',
      'li': '',
      'initList': '',
      'ulWidth': '',
      'liHeight': '',
      'tickerHook': 'tickerHook',
      'effect': {}
    }

    var plugin = this;
    plugin.settings = {}

    var $element = $(element),
      element = element;

    plugin.init = function() {
      plugin.settings = $.extend({}, defaults, options);
      param.ul = element.children('ul');
      param.li = element.find('li');
      param.initList = element.find('li:first');
      param.ulWidth = param.ul.width();
      param.liHeight = param.li.height();
      element.css({
        height: (param.liHeight)
      });
      param.li.css({
        top: '0',
        left: '0',
        position: 'absolute'
      });
      switch (plugin.settings.effectType) {
        case 'fade':
          plugin.effect.fade();
          break;
        case 'roll':
          plugin.effect.roll();
          break;
        case 'slide':
          plugin.effect.slide();
          break;
      }
      plugin.effect.exec();
    }

    plugin.effect = {};

    plugin.effect.exec = function() {
      param.initList.css(param.effect.init.css)
        .animate(param.effect.init.animate, plugin.settings.speed, plugin.settings.easing)
        .addClass(param.tickerHook);
      if (element.find(param.li).length > 1) {
        setInterval(function() {
          element.find('.' + param.tickerHook)
            .animate(param.effect.start.animate, plugin.settings.speed, plugin.settings.easing)
            .next()
            .css(param.effect.next.css)
            .animate(param.effect.next.animate, plugin.settings.speed, plugin.settings.easing)
            .addClass(param.tickerHook)
            .end()
            .appendTo(param.ul)
            .css(param.effect.end.css)
            .removeClass(param.tickerHook);
        }, plugin.settings.delay);
      }
    }

    plugin.effect.fade = function() {
      param.effect = {
        'init': {
          'css': {
            display: 'block',
            opacity: '0'
          },
          'animate': {
            opacity: '1',
            zIndex: '98'
          }
        },
        'start': {
          'animate': {
            opacity: '0'
          }
        },
        'next': {
          'css': {
            display: 'block',
            opacity: '0',
            zIndex: '99'
          },
          'animate': {
            opacity: '1'
          }
        },
        'end': {
          'css': {
            display: 'none',
            zIndex: '98'
          }
        }
      }
    }

    plugin.effect.roll = function() {
      param.effect = {
        'init': {
          'css': {
            top: '3em',
            display: 'block',
            opacity: '0'
          },
          'animate': {
            top: '0',
            opacity: '1',
            zIndex: '98'
          }
        },
        'start': {
          'animate': {
            top: '-3em',
            opacity: '0'
          }
        },
        'next': {
          'css': {
            top: '3em',
            display: 'block',
            opacity: '0',
            zIndex: '99'
          },
          'animate': {
            top: '0',
            opacity: '1'
          }
        },
        'end': {
          'css': {
            zIndex: '98'
          }
        }
      }
    }


    plugin.effect.slide = function() {
      param.effect = {
        'init': {
          'css': {
            left: (200),
            display: 'block',
            opacity: '0'
          },
          'animate': {
            left: '0',
            opacity: '1',
            zIndex: '98'
          }
        },
        'start': {
          'animate': {
            left: (-(200)),
            opacity: '0'
          }
        },
        'next': {
          'css': {
            left: (param.ulWidth),
            display: 'block',
            opacity: '0',
            zIndex: '99'
          },
          'animate': {
            left: '0',
            opacity: '1'
          }
        },
        'end': {
          'css': {
            zIndex: '98'
          }
        }
      }
    }

    plugin.init();
  }

  $.fn.simpleTicker = function(options) {
    return this.each(function() {
      if (undefined == $(this).data('simpleTicker')) {
        var plugin = new $.simpleTicker(this, options);
        $(this).data('simpleTicker', plugin);
      }
    });
  }
})(jQuery);

$(function() {
  var cloned_fade = $("#ticker-fade").clone() //keep cloned of div
  $('#update').on('click', function() {
    $("#ticker-fade").replaceWith(cloned_fade); //replace whole ul with cloned
    $.simpleTicker($("#ticker-fade"), {
      'effectType': 'roll'
    }); //then update
  });
});

.ticker {
  margin: 0;
  padding: 10px;
  width: 600px;
  text-align: left;
  border: #ccc 1px solid;
  position: relative;
  overflow: hidden;
  background-color: #ffffff;
}

.ticker ul {
  width: 100%;
  position: relative;
  margin: auto;
}

.ticker ul li {
  width: 100%;
  display: none;
}


/* DEMO */

body {
  margin: 0 auto;
  width: 600px;
}

#update {
  color: red;
  font-weight: bold;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  $(function() {
    $.simpleTicker($("#ticker-fade"), {
      'effectType': 'fade'
    });   
  });
</script>

<div id="update">Click to Update</div>

<h2>fade pattern</h2>
<div id="ticker-fade" class="ticker">
  <ul>
    <li>パターン１　テスト１</li>
    <li>パターン１　テスト２</li>
    <li>パターン１　テスト３</li>
    <li>パターン１　テスト４</li>
    <li>パターン１　テスト５</li>
  </ul>
</div>