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/。这将使它在注入DOM时从0不透明度开始，并转到默认值，即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版本完成了一个项目。

Javascript / jQuery为replaceChild添加动画

1 个答案: