动画随机文本改革作为完整的句子与jQuery

Question

我一直在研究这个问题，真的需要一些帮助。这个脚本使一个句子被打破，然后每个跨度创建动画随机在一个盒子里，我需要能够停止动画和动画原句子一起回到随机框下面。我用Dave rupert的字母脚本把句子分开。

最终的动画应该有字母从上面的框中掉出来后的改革。

    <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>

Answer 1

你的代码有一些问题:

• 没有办法阻止元素排斥
• 你在jquery的原型对象上实现的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});
});

Answer 2

我已经添加了一些数组并更改了settimeout方法，您可以从这里控制它