오버플로가있는 div에 jquery marquee와 같은 애니메이션 : 숨김 및 nowrap?

Question

650px 너비로 제한되어야하는 song-title (최대 너비, nowrap 및 overflow : hidden이있는 절대적으로 배치 된 h1)의 블록 요소가 있습니다. H1의 너비가 650px이면 div를 수평으로, 앞뒤로 핑퐁 방식으로 스크롤하는 애니메이션을 시작해야합니다.

스크롤에 애니메이션을 적용하려면 어떻게해야합니까?

Answer 1

JQuery와 윤곽 플러그인을이

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

Answer 2

I는이 문제를 해결하기 위해 가장 효율적인 또는 가장 좋은 방법은 아니라는 것을 알고,하지만이 작업을 수행하는 두 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); 
    } 
}; 

잘 작동하지만 정상적인 스크롤 방법은 아닙니다. 또한 두 번째 함수를 첫 번째 멤버의 private 멤버로 만드는 방법을 알지 못하므로 사이트에서 호출 할 수 없습니다 ... 어떻게하는지 알 수 있습니까?

Answer 3

code provided by Greg Schoppe에 jQuery 애니메이션 하위 시스템을 사용하도록 리팩토링했습니다.

내 버전과 his 사이의 타이밍은 약간 다르지만 쉽게 조정할 수 있어야합니다.

(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);