Jquery.如何在<p>函数执行后分离/删除和停止带有 div 的动画

Question

我有一个ID为callus的div，在该div中有一个带有paragraph(#call)的链接。现在我已经为hover事件激活了div，我已经将Click=Free call添加到其中，到目前为止一切顺利。

然而，动画并没有停止，我得到重复的Click=Free call文本一直到页脚。

并且动画不会在mouseouleave上停止。

感谢您的帮助。

对

下面是代码的相关部分:

我的目标是只让附加的文本显示一次。

$('#callus').hover(
  function() {
  $(this).animate({ width: "90%" }, 1000 )
  .animate({ height: "50px"},1000 )
  .animate({ fontSize: "24px" }, 1000 )
  .animate({ borderLeftWidth: "15px" }, 1000 );
  $('#call').append( "<p>Click=Free call</p>" );
  $('#call').mouseleave(
    function() {
      $('#call').detach( "<p>Click=Free call</p>");
    });
  }); 

Answer 1

几点注意事项:

1. 您可以使用工具
中的{}选项来启用代码高亮显示，使您的代码更具可读性。
2. 你不需要把多个属性的动画调用链接在一起，你可以把它们都放在一个调用中，就像下面的
3. .stop()将停止对象上的任何动画
4. 使用.text()只更改元素的文本
5. Hover需要2个回调。一个用于mouseenter，一个用于mouselleave。在mouseenter事件中有一个额外的mouseleave事件。尝试像下面这样调用.hover()
6. 如果你想这样做的话，你不会在mouseleave事件中让你的属性返回动画

看看上面的修改是否能解决你的问题，或者试试下面的代码。

$('#callus').hover(function() {
   $(this).stop().animate({
       width: "90%"
      ,height: "50px"
      ,fontSize: "24px"
      ,borderLeftWidth: "15px"
   });
   $('#call').text("Click = Free call"); 
},function() { 
   $('#call').text(""); 
});