Jqueryアニメーションスライドエフェクト

私はテキストエリアを持っていて、そのテキストエリアをクリックするとdivがフェードインされ、右にスライドするとぼやけて消えますが、問題は元々移動していたポイントからフェードインします。元の位置から開始する方法はありますか?

私のhtml

 


 <div id="block" style="display:none;">
       

Tips

         
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div>

私のCSS

#block {
  position:absolute;
  left:400px;
  top:80px;
  width:500px;
  margin:0px;
  z-Index: 100;
  background-color:#FBCA8F;
color: #444;
border: 1px solid #000;
padding:10px;
line-height: 150%;
}

Javascript

$("#textarea").focus(function(){
  $("#block").fadeIn(10).animate({"left": "+=30px" },"fast");
});
 $("#textarea").blur(function(){ $("#block").animate({"left": "-=5px" },"fast").fadeOut(10);
 });

もともと、そのサイトのテキストエリアのスライドの記述(http://www.taskrabbit.com/tasks/newfrom=howitworks)は私が目指していたものでしたが、これは私が思いつくことができるものです。 私は本当に助けに感謝します。 どうもありがとう。

0

1 答え

ええ、javascriptでこのようなblucr関数を変更:

$("#textarea").blur(function(){ $("#block").animate({"left": "-=5px" },"fast").fadeOut(10 , function(){//put back $("#block") to his start position });});

あなたはfadeOut関数のコールバックを持っているので、すべてが終わったら、あなたが望むところにすべてを戻すことができます

1
追加された