JQuery Animate 只能运行一次

Question

您好，我正在使用 JQuery 为我的页面上的 2 个 div 框设置动画，这第一次工作正常，但随后的时间我只是得到可见的框，没有任何动画效果，下面的代码是由一个名为 Buttonx 的按钮触发的。感谢您提前提供的任何帮助

$(document).ready(function(){
   // lWhen document loaded 

$("#buttonx").click(function() { DisplayUniDiv( 40,250,300 ) }); 
$('#UniDivHead').click(function() { CloseDiv() }); 
    });



   function DisplayUniDiv(top,width,height,color) { 

dvHead = $('#UniDivHead') ; 
dvBody = $('#UniDivBody') ;     

    // Display the Div Head 
dvHead.css("visibility", "visible");
if (color) { color = "#" + color ; } else { color = "#0066cc"  } ;  
    dvHead.css("background", color ) ;
dvHead.css("top", top + 'px' ); 
dvHead.css("width", width + 'px') ;
    MarginLeft = (width / 2) ; 
    MarginLeft = "-" + MarginLeft ;     
dvHead.css("marginLeft", MarginLeft) 
dvHead.append("Close") ; 

    // Display the body 
dvBody.css("visibility", "visible");
dvBody.css("background", '#CCC' ) ;
    HeadHeight = dvHead.height() ; 
dvBody.css("top", top + HeadHeight + 'px' ); 
dvBody.css("width", width + 'px') ; 
dvBody.css("marginLeft", MarginLeft)    
dvBody.animate({height:height},500);

    }

    function CloseDiv() {
dvHead = $('#UniDivHead') ; 
dvBody = $('#UniDivBody') ;

dvHead.css("visibility", "hidden");
dvBody.css("visibility", "hidden"); 

     }

Answer 1

因为在 close 函数中，您只是隐藏该元素（此处： dvBody.css("visibility", "hidden"); ），但您应该将其高度设置为 0 。 喜欢：

dvBody.css({"visibility":"hidden", height:0});

Answer 2

我认为这可能是因为您第一次执行 DisplayUniDiv() 时，它实际上操纵了尺寸和其他因素，并使对象可见。

当您执行 CloseDiv() 时，它会使对象不可见。

当您第二次执行 DisplayUniDiv() 时，它确实使对象可见，但所有其他属性都已处于您尝试将它们设置为动画的状态。动画仍然“运行”，但没有任何作用。

如果您想拥有可见的第二个动画，除了隐藏它们之外，还可以尝试重置其余的对象属性。这可能会解决你的问题。

Answer 3

这部分只工作一次：

if (color) { color = "#" + color ; } else { color = "#0066cc"  } ;  
    dvHead.css("background", color ) ;

因为它将遵循这个序列，这在第一次迭代后无效：

ABCDEF -> #ABCDEF -> ##ABCDEF -> ###...

我已经压缩了你的代码一点，所以看看这是否有效：

$(document).ready(function() {
  $('#buttonx').click(function() {
    DisplayUniDiv(40, 250, 300)
  });

  $('#UniDivHead').click(function() {
    $('#UniDivHead, '#UniDivBody').hide();
  });
});



function DisplayUniDiv(top, width, height, color) {
  $('#UniDivHead').show();

  if (color.index('#') == -1) {
    color = '#' + color;
  } else {
    color = '#0066cc'
  };
  $('#UniDivHead').css('background', color);
  $('#UniDivHead').css('top', top);
  $('#UniDivHead, #UniDivBody').width(width);
  $('#UniDivHead').css('margin-left', MarginLeft)
  $('#UniDivHead').append('<span>Close</span>');

  $('#UniDivBody').show();
  $('#UniDivBody').css('background', '#CCC');
  $('#UniDivBody').css('top', top + $('#UniDivHead').height());
  $('#UniDivBody').css('margin-left', -(width / 2))
  $('#UniDivBody').animate({height: height}, 500);
}

基本上，当你隐藏你的元素时，设置 visibility :hidden; 大多数时候并不能解决问题。 jQuery 有 .hide()，它设置 display: none;。