的Javascript/jQuery的添加動畫的replaceChild

Question

我是相當新的JavaScript，因此讓我知道如果我做得有點傻，但這裏的要點是：

我和集成新的工作功能到一個非常嚴格構建的模板（我基本上只有一個明文鏈接）。我的解決方法是隻添加一些jQuery，它會添加一個onclick方法，用於替換實際上想要的元素的鏈接。

$(document).ready(function(){ 
    $("li a:contains('Search')").bind("click", replaceWithSearch); 
}); 


function replaceWithSearch(){ 
    var searchWrapper = constructSearchBox(""); 
    this.parentNode.replaceChild(searchWrapper, this); 
} 

這一切都有效，但我一直在這裏和UI用戶交談，他們想要這個替換的動畫。當然，他們的goto是使用CSS動畫，但我不確定如何向replaceChild操作添加平滑淡入淡出或幻燈片動畫。我在想這個方法嗎？如果是這樣，我將如何添加該動畫？

Answer 1

使用CSS動畫，你會做類似如下：

.your-selector { 
    animation: fadeIn 400ms ease-in-out; 
} 

@keyframes fadeIn { 
    from { opacity: 0; } 
} 

這裏是顯示這個小提琴：http://jsfiddle.net/zt3QB/。這將使它從0開始的不透明度時，它被注入DOM，並轉到默認，這是1

如果你想使用jQuery：

function replaceWithSearch(){ 
    var searchWrapper = constructSearchBox("").css('opacity', 0); 
    this.parentNode.replaceChild(searchWrapper, this); 
    // Using setTimeout because sometimes the DOM is too fast... 
    setTimeout(function() { 
     searchWrapper.fadeTo(400, 1); 
    }, 0); 
} 

我沒有測試jQuery之一，但我做了類似的事情。剛剛完成了一個使用CSS版本的項目。