7

そのため、コードはほぼ希望どおりに機能していますが、アニメーションを正しく同期させることはできません。テキストを強調表示するカーソルをアニメーション化してから、ボタンをクリックしようとしています。問題は、カーソルが遅すぎるか速すぎることです。テキストの長さに関係なく、アニメーションの同期を維持できるように、これを動的にしようとしています。おそらく単なる数学の問題であることはわかっていますが、頭を悩ませることはできません。ピクセルをミリ秒と一致させようとすると、頭が回転します。髪を全部抜く前に助けてください。ありがとう。

ここにhtmlがあります

<p><span id="container">I need to be highlighted one character at a time</span>
<input id="click" type="button" value="click me"/></p>
<img src="http://dl.dropbox.com/u/59918876/cursor.png" width="16"/>

ここにCSSがあります

#container{
   font-size: 16px;  
   margin-right: 10px;   
}
.highlight{
    background: yellow;           
}
img{
  position: relative;
  top: -10px;    
}

そしてジャバスクリプト

function highlight(){
    var text = $('#container').text(); //get text of container
    $('#click').css('border','none'); //remove the border
    $('img').css('left', '0px'); //reset the cursor left
    $('img').animate({left: $('#container').width() + 40}, text.length*70); //animation of cursor
    $('#container').html('<span class="highlight">'+text.substring(0,1)+'</span><span>'+text.substring(1)+'</span>'); //set the first html
    (function myLoop (i) {//animation loop          
       setTimeout(function () {        
         var highlight = $('.highlight').text();
         var highlightAdd = $('.highlight').next().text().substring(0,1);;
         var plain = $('.highlight').next().text().substring(1);
         $('#container').html('<span class="highlight">'+highlight+highlightAdd+'</span><span>'+plain+'</span>');     
         if (--i) myLoop(i);//  decrement i and call myLoop again if i > 0
        }, 70)
    })(text.length);
    setTimeout(function () {   
        $('#click').css('border','1px solid black');
     }, text.length*85);
}

highlight();
var intervalID = setInterval(highlight, $('#container').text().length*110);
//clearInterval(intervalID);

これは、私が遊んでいるフィドルへのリンクです。

4

3 に答える 3

3

これはおそらく私を投票に落とすでしょうが、多分あなたはいくつかのより良いアイデアを得るでしょう...
ここでフィドル

$(document).ready(function() {
$('p').click(function(){

    $('span').animate({'width':'100'},1000);
    $('.cursor').animate({marginLeft: 100},1000);
});
});
于 2012-12-20T20:28:08.303 に答える
1

Dejoのおかげで、コードを変更して、これが希望どおりに機能するようにすることができました。あるスパンを拡大しながら別のスパンを縮小しようとするよりも、1つのスパンの幅を拡大する方がはるかに簡単でした。これにより、カーソルの移動とスパン幅を増やすアニメーションの両方を同期して実行することもできました。

HTML

<p><span id="highlight"></span><span id="container">I need to be highlighted one character at a time</span><input id="click" type="button" value="click me"/></p>
<img id="cursor" src="http://dl.dropbox.com/u/59918876/cursor.png" width="16"/>

CSS

p{
  position: relative;
  font-size: 16px;   
 }
#highlight{
 position: absolute;
 background-color:yellow;
 height:20px;
 z-index:-50;   
}
#cursor{
 position: relative;
 top: -10px;    
}
#click{
  margin-left; 10px;   
}

そしてjavascript

function highlight(){
    var textLength = $('#container').text().length;
    $('#click').css('border','none'); //remove the border
    $('#cursor').css('left', '0px'); //reset the cursor left
    $('#highlight').width(0);
    $('#highlight').animate({width: $('#container').width()}, textLength * 70);
    $('#cursor').animate({left: '+='+$('#container').width()} , textLength * 70, function(){
        $('#cursor').animate({left: '+=30'} , textLength * 20);
    });
    setTimeout(function () {   
        $('#click').css('border','1px solid black');
     }, textLength*100);
}

highlight();
var intervalID = setInterval(highlight, $('#container').text().length*120);
//clearInterval(intervalID);
于 2012-12-20T22:02:52.170 に答える
0

かなり遅れていることは承知していますが、ここに少し助けがあります（将来の参考のために）。JQueryanimate関数は、デフォルトでeasingofswingに設定されています。これは、アニメーションの速度が全体で変化することを意味します (こちらを参照)。

この問題を (ちょっと) 解決するために、カーソルlinearのメソッドにオプションを追加animateし、カーソルの速度を少し上げました。

この新しいバージョンはJSFiddleで確認できます。

ただし、setTimeout何らかの理由でループが遅くなる可能性があるため、アニメーションが同期していない可能性があります。

于 2015-03-11T03:14:48.597 に答える