将随机文本动画化为jQuery的完整句子

我一直在研究这个问题，真的需要一些帮助。这个脚本可以打开一个句子，然后每个跨度在一个框中随机创建动画，我需要能够停止动画并将原始句子一起动画回到随机框下方。我正在使用戴夫鲁珀特刻字脚本来分开这个句子。掉出上面的方块后将随机文本动画化为jQuery的完整句子

的fianl动画应有的字母改革。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript">/* Lettering.JS 0.6 by Dave Rupert - http://daverupert.com */ 
(function($){var methods={init:function(){return this.each(function(){return injector($(this),'','char','')})},words:function(){return this.each(function(){return injector($(this),' ','word',' ')})},lines:function(){return this.each(function(){var t=$(this),r="eefec303079ad17405c889e092e105b0";t.children("br").replaceWith(r);return injector(t,r,'line','')})}};function injector(t,splitter,klass,after){var a=t.text().split(splitter),inject='';if(a.length>0){$(a).each(function(i,item){inject+='<span class="'+klass+(i+1)+'">'+item+'</span>'+after});t.empty();t.append(inject)}}$.fn.lettering=function(method){if(methods[method]){return methods[method].apply(this,Array.prototype.slice.call(arguments,1))}else if(method=='letters'||!method){return methods.init.apply(this,arguments)}else{$.error('Method '+method+' does not exist on jQuery.lettering')}}})(jQuery);</script> 
<script> 
$(document).ready(function() { 
    $(".fancy").lettering(); 
     $.fn.pulseRandom = function() { 
     var repulse = function ($elem) { 
      var rand = Math.floor(Math.random() * 150), 
      rands = Math.floor(Math.random()* 150) + 150, 
       time = Math.floor(Math.random() * 200) + 200; 

      $elem.animate({ 'margin-top':rand, 'margin-left':rands }, time - 1); 
      setTimeout(function(){ repulse($elem); }, time); 
     }; 
      repulse(this); 
    }; 

    $('.fancy span').each(function(i,ele){ 
      $(ele).pulseRandom(); 
    }); 
    $('.fancy').click(function(){ 
     $('.fancy span').animate({ 
      'margin-top':'300px' 
     }); 
    }); 
}); 
</script> 
<style> 
.fancy{ 
    border:8px #66CC66 solid; 
    padding:5px; 
    width:170px; 
    height:170px; 
    margin-left:150px; 
    margin-top:20px; 
    position:absolute; 
    z-index:10; 
} 
.fancy span{ 
    width:15px; height:15px; 
    position:absolute; 
    margin:10px; 
    z-index:30; 
    left:-140px; 
} 
.fancy span:nth-child(odd){ 
     margin:10px; 
} 
.fancy span:nth-child(even){ 
     margin:20px; 
} 
.fancy span:nth-child(-n+10){ 
     margin:20px; 
} 

</style> 
<div class="fancy"><p>Merry Christmas Anna, can you see the letters jumbled up?</p></div>

来源

2011-11-29 starks

什么是你遇到的问题？ – maxedison

当试图从文本框动画文本下面它文本只是反弹，或者如果我尝试用.replaceWith替换span元素，文本结冰，最后我需要文本形成一个句子，我用来生成绿色框中的随机字母。 – starks

有你的代码的特定问题：

没有办法阻止元素击退
您对jQuerys原型对象实现的pulseRandom应该
- 使用each本身
- 返回this保持可链接
对于你需要什么奇数的利润，甚至和10跨度？

我创建了http://jsfiddle.net/3vTwR/1/，增加了您的代码。我用top和left而不是margin，这对我来说似乎更清楚。具有停止功能的回调是一种不常见的方式，但它起作用。如果没有原型pulseRandom我会用

function pulseRandom($element) { 
    // do something with $element 
    return stopFunction() { 
     // clear timeouts 
    }; 
} 
var stop = pulseRandom($('.fancy span')); 
$('.fancy').click(function(){ 
    stop(); 
    $('.fancy span').animate({'top':'300px', 'left':0}); 
});

来源

2011-11-29 17:23:22 Bergi

这一个工作我如何希望的那样，快速回复:) – starks

一两件事，将是不错的是2秒钟的停顿文字下降之前，形成了一句，关于奇的造型非常感谢，即使是第10个孩子，这是初始样式，我认为它仍然需要，但似乎不是。也为此感谢。 – starks

我已经添加了一些列碰巧你的setTimeout方法，你可以从this fiddle
控制它，我希望它有助于..

来源

2011-11-29 17:24:08 Alper

将随机文本动画化为jQuery的完整句子

回答

相关问题