Question

我有一个textarea并点击该textarea一个div fadesIn并向右滑动并且在模糊时淡出但是问题是当你再次点击它时它会从最初移位的点开始淡入。有没有办法让它从原来的位置开始？

我的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%;
}

的Javascript

$("#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的回调，所以当一切都完成后，你可以把所有你想要的东西放回去

Jquery动画滑动效果

1 个答案: