Javascript prependTo之后现有div上的jQuery幻灯片动画

我有一个半滑块样式的UI，其中从左侧添加了新术语：。我使用jQuery prependTo函数来实现这一点。我的问题是，我希望已经显示的术语在添加新术语时向右执行动画幻灯片，而不是突然“出现”在正确的位置。我确实尝试过在已经成功显示的术语中添加一个“显示”类，然后尝试在右侧动画中添加一个幻灯片，但这并没有达到我想要的效果（“显示”的对象被移动到了比我预期的更右侧）

下面是有问题的代码（您可能希望查看小提琴，以便在上下文中看到它）：

函数addToStream（术语，延迟）{
setTimeout（函数（）{
$("")
.addClass（“流_术语”）
.html（学期）
.css({
不透明度：0
})
.prependTo（“流式术语”）
.animate（{opacity:1}），
{持续时间：1000，
完成：函数（）{
$（此）.addClass（“显示”）；
}
});
}，延误）；
}

这里的任何帮助都将不胜感激。谢谢大家!

*注意：我可以在代码中访问jQueryUI，尽管它没有链接到fiddle中。另外，如果有人知道一个插件能比我做得更好，请告诉我。我能找到的最接近的一个是，但我没有发现如何用它创建类似的用户界面（对于我来说，这可能也有点过头了）。

这里有一个方法：

function addToStream(term, delay) {
    setTimeout(function(){
        var newDiv = $("<div />");

        newDiv.addClass("stream_term")
        .html(term)
        .css({
            opacity: 0,
            display: 'none'
        }).prependTo("#stream_terms");

        var width = newDiv.width();
        var height = newDiv.height();

        newDiv.css({
            width: 0,
            height: height,
            display: 'inline-block'
        })
        .animate({
            width: width,
            margin: '0 10px',
            padding: '5px 10px'
        }, 1000)
        .animate({opacity: 1}, 1000, function(){
            $(this).addClass("displayed");
        });
    }, delay);
}

---

演示：

是的，这样就可以了-非常感谢！我确实注意到动画有点起伏，但这可能没什么帮助。@Brutalisk设置边距和填充值的动画应该可以消除这个问题。我更新了我的答案和演示。完美！工作起来很有魅力！

function addToStream(term, delay) {
    setTimeout(function(){
        var newDiv = $("<div />");

        newDiv.addClass("stream_term")
        .html(term)
        .css({
            opacity: 0,
            display: 'none'
        }).prependTo("#stream_terms");

        var width = newDiv.width();
        var height = newDiv.height();

        newDiv.css({
            width: 0,
            height: height,
            display: 'inline-block'
        })
        .animate({
            width: width,
            margin: '0 10px',
            padding: '5px 10px'
        }, 1000)
        .animate({opacity: 1}, 1000, function(){
            $(this).addClass("displayed");
        });
    }, delay);
}

.stream_term {
    padding: 0;
    margin: 0;
    overflow: hidden;
}