jquery marquee-like анимация для div с переполнением: скрытый и nowrap?

Question

У меня есть элемент блока для названия песни (абсолютно позиционированный h1 с max-width, nowrap и overflow: hidden), который должен быть ограничен шириной 650 пикселей. если ширина H1 составляет 650 пикселей, мне нужно запустить анимацию, которая прокручивает div горизонтально, взад и вперед по пинг-понг-подобной манере.

Как бы я мог оживить свиток?

Answer 1

есть является JQuery Marquee Plugin

http://plugins.jquery.com/marquee/

Answer 2

Я знаю, что это не самый эффективный или лучший способ решить эту проблему, но я в конечном итоге создание две функции JQuery, для выполнения этой задачи:

$.fn.pingpongscroll = function() { 
    var delay = 30; 
    $(this).wrapInner('<span>'); 
    var contentWidth = $(this).children('span').width(); 
    var boxWidth = $(this).width(); 

    if (contentWidth > boxWidth) { 
     var startIndent = parseInt($(this).css('text-indent')); 
     var currIndent = startIndent; 
     var left = true; 
     $(this).pingpongscrollstep(contentWidth, startIndent, currIndent, left, delay); 
    } 
}; 
$.fn.pingpongscrollstep = function (contentWidth, startIndent, currIndent, left, delay) { 
    if($(this).length != 0) { 
     thisdelay = delay; 
     if(left) { 
      if(contentWidth + currIndent > $(this).width()) { 
       currIndent = currIndent - 1; 
       $(this).css('text-indent', currIndent); 
      } else { 
       left = false; 
       thisdelay = thisdelay*20; 
      } 
     } else { 
      if(currIndent < startIndent) { 
       currIndent = currIndent + 1; 
       $(this).css('text-indent', currIndent); 
      } else { 
       left = true; 
       thisdelay = thisdelay*30; 
      } 
     } 
     var thiselement = this; 
     setTimeout(function(){ 
      $(thiselement).pingpongscrollstep(contentWidth, startIndent, currIndent, left, delay); 
     }, thisdelay); 
    } 
}; 

Хотя эти работы хорошо, я уверен, что это не обычный способ обработки прокрутки. Кроме того, я понятия не имею, как сделать вторую функцию частным членом первой, поэтому ее нельзя вызывать на сайте ... кто-нибудь знает, как это сделать?

Answer 3

Я реорганизовал code provided by Greg Schoppe для использования подсистемы анимации jQuery.

Сроки между моей версией и его немного отличаются, но это должно быть легко настраиваемым.

(function($) { 
    $.fn.pingpongscroll = function() { 
     $(this).wrapInner('<span style="white-space: nowrap">'); 
     var contentWidth = $(this).children('span').width(); 
     var boxWidth = $(this).width(); 

     if (contentWidth > boxWidth) { 
      var startIndent = parseInt($(this).css('text-indent')); 
      var currIndent = startIndent; 
      var left = true; 

      var maxIndent = $(this).width() - contentWidth; 
      pingpong($(this)); 

      function pingpong($el) { 
       $el 
        .delay(2500) 
        .animate(
         {'text-indent' : maxIndent}, 
         5000, 
         'linear') 
        .delay(2500) 
        .animate(
         {'text-indent' : startIndent}, 
         5000, 
         'linear', 
         function() { 
          pingpong($el) 
         }); 
      } 
     } 
    }; 
})(jQuery);