JQuery Animate只能工作一次

问题描述：

嗨我正在使用JQuery来为我的页面上的2个div框设置动画，这种方法第一次正常工作，但随后的时间我只看到没有任何动画效果的可见框，代码低于该值时从按钮称为buttonx。感谢您的帮助提前JQuery Animate只能工作一次

$(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"); 

    }

你也可以包含HTML吗？真的很难想象这是在做什么。 – Chriszuma

答

因为在close功能，您只需隐藏元素（此处dvBody.css("visibility", "hidden");），但你应该高度设置为0，如：

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

答

我想这可能是你第一次执行DisplayUniDiv（），它实际上操纵尺寸和其他因素的影响，以及使对象可见。

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

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

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

答

这部分只能使用一次：

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只能工作一次

相关推荐