jquery - 如何在jquery中通过附加数据移动光标。？

Question

我正在制作一个闪烁的光标。我需要这个光标应该在数据末尾闪烁（几秒钟后出现数据）并附加到 div 中。直到现在我的光标位置是固定的。现在我需要在末尾移动光标竞争。这里是尝试。 http://jsfiddle.net/naveennsit/prUYP/

$(document).on('click', '#call', function(event) {


     setInterval(function(){
   $('#realTimeContents' ).append("kkkkkkkkkk"+'\n');

  },3000);
     setInterval(function(){

cursorAnimation();  
  },600);
});


function cursorAnimation() 
{
   // alert("yy")
  $("div.cursor").animate(
  {
    opacity: 0
  }, "fast", "swing").animate(
  {
    opacity: 1
  }, "fast", "swing");
}

我需要这样的结果

kkkkkkk|
KKKKKK  KKKKKKKK|

KKKKKk  kkkkkkkk  kkkkkkk|

Answer 1

您可以尝试将 .cursor 更改为“span”并将其添加到 #realTimeContents 中并更改 append 以添加
HTML

<div data-role="page" id="realTimeScreen" >
 <a href="#" data-role="button" data-corners="false" data-inline="true" id="call" class="" >call</a>
    <div id="realTimeContents" class ="left realtimeContend_h" style="width:97%;"> 
     <span class="cursor" style="font-size:23px;">|</span>
    </div>                       
</div>    

JS

$(document).on('click', '#call', function(event) {
 setInterval(function(){
   $('#realTimeContents' ).prepend("kkkkkkkkkk"+'\n');
  },3000);
 setInterval(function(){

cursorAnimation();  
},600);
});

function cursorAnimation() 
{
  $(".cursor").animate(
  {
    opacity: 0
  }, "fast", "swing").animate(
  {
    opacity: 1
  }, "fast", "swing");
}    

http://jsfiddle.net/prUYP/2/