Question

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

这是有问题的代码（你可能想要查看小提琴，但在上下文中看到它）：

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，尽管它没有在小提琴中链接。此外，如果有人知道一个插件可以比我更好地做这件事，请告诉我。我能找到的最接近的是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;
}

DEMO：http://jsfiddle.net/StathisG/hqg29p6r/1/

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

1 个答案: