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

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

执行CloseDiv（）时，它会使对象不可见。

第二次执行DisplayUniDiv（）时，它确实使对象可见，但所有其他属性都已处于您尝试为其设置动画的状态。动画仍然“运行”，但它没有任何事情要做。

如果您想拥有可见的第二个动画，请尝试重置剩余的对象属性，只隐藏它们。这可能会解决您的问题。

Answer 2

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

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

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;。

JQuery Animate只能运行一次

3 个答案: