javascript - prependTo 后现有 div 上的 jQuery 幻灯片动画

Question

我有这个半 slider 样式的用户界面，其中从左侧添加了新术语:http://jsfiddle.net/v4v5cvkz/ .我正在使用 jQuery prependTo 函数来执行此操作。我的问题是我希望已经显示的术语在添加新术语时向右执行动画幻灯片，而不是突然“出现”在正确的位置。我确实尝试为已成功显示的术语添加一个“显示”类，然后尝试添加一个向右滑动的动画，但这并没有完全达到我想要的效果(“显示”对象是比我预期的更靠右)。

这是有问题的代码(尽管您可能想要查看 fiddle 以在上下文中看到它):

function addToStream(term, delay) {
    setTimeout(function(){        
        $("<div />")
        .addClass("stream_term")
        .html(term)
        .css({
            opacity: 0
        })
        .prependTo("#stream_terms")
        .animate({opacity:1}, 
                 {  duration: 1000,
                    complete: function() {
                        $(this).addClass("displayed");
                    }
                });
    }, delay);
}

如有任何帮助，我们将不胜感激。谢谢!

*注意:我可以在我的代码中访问 jQuery UI，尽管它没有在 fiddle 中链接。另外，如果有人知道可以比我更好地完成这类事情的插件，请告诉我。我能找到的最接近的是 Fraction Slider ，但我发现如何使用它创建类似的 UI 并不明显(对于我的目的来说，这也可能有点矫枉过正)。

Answer 1

这里有一个方法:

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

它还需要以下 CSS 更改:

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

演示:http://jsfiddle.net/StathisG/hqg29p6r/1/