Блог

Главная - Вопросы по программированию - jQuery сбрасывает предыдущий эффект newsticker, чем заменить на новый эффект щелчком мыши

jQuery сбрасывает предыдущий эффект newsticker, чем заменить на новый эффект щелчком мыши

#javascript #jquery

#javascript #jquery

Вопрос:

Я использую этот плагин, простой новостной тикер.

Код работает правильно.

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, исчезает и сворачивается.

Мой вопрос, возможно ли сбросить предыдущий эффект, чем заменить его на новый эффект щелчком мыши?

Комментарии:

1. Итак, при нажатии на простой тикер fade, вы хотите изменить тип эффекта roll?

2. Привет, как вы можете видеть, у меня есть этот div <div id="update">Update</div> , когда я нажимаю на него, бегущая строка меняет эффект с fade на roll.

3. Привет, вы можете увидеть на этой скрипке рабочую демонстрацию jsfiddle.net/tbLemz4y Как я уже объяснял, когда нажимаете обновить div, для этого $.simpleTicker($("#ticker-fade") следует изменить на эффект отката, а не исчезать больше.

Ответ №1:

Я не вижу никакой документации, связанной с этим, поэтому вот альтернативное решение.

Вы можете сохранить клонированный div, где вам нужно изменить эффекты, используя .clone() . Затем при каждом нажатии кнопки обновления вы можете заменить оригинал на клонированный, а затем применить 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>