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

    }

來源

2011-09-06 Mick

你也可以包含HTML嗎？真的很難想象這是在做什麼。 – Chriszuma

因爲在close功能，您只需隱藏元素（此處dvBody.css("visibility", "hidden");），但你應該高度設置爲0，如：

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

來源

2011-09-06 15:47:01

我想這可能是你第一次執行DisplayUniDiv（），它實際上操縱尺寸和其他因素的影響，以及使對象可見。

當您執行CloseDiv（）時，它使對象不可見。

當您第二次執行DisplayUniDiv（）時，它確實使對象可見，但所有其他屬性已處於您試圖爲其設置動畫的狀態。動畫仍然「運行」，但它沒有任何事情要做。

如果您想要有可見的第二個動畫，請嘗試重置剩餘的對象屬性，除了只隱藏它們。這可能會解決你的問題。

來源

2011-09-06 15:44:58 JeffreyHammansson

這部分只能使用一次：

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

來源

2011-09-06 15:53:13 Blender

JQuery Animate只能工作一次

回答

相關問題