動畫VS CSS - 動畫不能正常工作

這是工作

$("#add-widgets").click(function() { 
    $("#list-widgets").css({display:"block"}); 
});

但是，這並不：

$("#add-widgets").click(function() { 
    $("#list-widgets").animate({display:"block"},1000); 
});

你能幫我？謝謝

來源

2014-02-20 rolo1091

'display：block'是一個二進制函數..它可以打開或關閉。你不能爲它製作動畫。 –

有很多可以使用的動畫。這取決於你想要的。例如，對於fadeIn可以使用：

$("#list-widgets").fadeIn();

來源

2014-02-20 15:47:06

謝謝！我不記得那個功能。完美作品 – rolo1091

歡迎您！ :-) –

如果你只是做一個「動畫」從隱藏塊：

$("#list-widgets").fadeIn();

否則，你應該做一個黑客：

克隆你的列表：

var tmp = $（「＃list-widgets」）。clone（）;
給的CSS tmp下新值：

tmp.css（{顯示：「塊」}）;
保存新上邊和左邊位置：

變種newTop = tmp.position（）頂部; var newLeft = tmp.position（）。left;
最後將你的元素：

$（「＃列表的小部件」）動畫（{
'頂'：newTop，
'左'：newLeft
}，1000）;

來源

2014-02-20 16:02:03

您不能對顯示屬性設置動畫，因爲這些屬性之間沒有值之間的值。例如，一個元素可以設置爲display:none或任何其他屬性，如display:block，但兩者之間沒有值。如果你將不透明度從opacity:0設置爲opacity:1，那麼你的值介於opacity:0.01之間opacity:0.99

來源

2014-10-21 10:00:30 JonasB

動畫VS CSS - 動畫不能正常工作

回答

相關問題