jQuery动画滑动效果

Question

我有一个textarea，在单击该textarea时，div淡入并向右滑动，在模糊时淡出，但问题是当您再次单击它时，淡出它的位置是原来的位移。 有没有办法使它从其原始位置开始？

我的HTML

 <textarea id="textarea" cols="50" rows="15" style="margin-top:100px;"></textarea>
 <div id="block" style="display:none;">
       <h1>Tips</h1>
         <p>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.
         </p></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%;
}

Java脚本

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

最初，我的目标是该站点上的textarea幻灯片说明（http://www.taskrabbit.com/tasks/newfrom=howitworks），但这只是我能想到的。 我真的很感谢您的帮助。 非常感谢。

Answer 1

是的，在javascript中更改了blucr函数，如下所示：

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

您在fadeOutFunction上有一个回调，因此当完成所有操作后，您可以将所有内容放回希望的位置