jquery - jQuery向左滚动并同时淡入

我有以下代码，它可以很好地向左滚动div。但是我需要它们向左滚动并在向左滚动时淡入。

我怎样才能做到这一点？

$('div#line1').delay(1000).show("slide", { direction: "right" }, 1500);
$('div#line2').delay(2000).show("slide", { direction: "right" }, 1500);
$('div#line3').delay(3000).show("slide", { direction: "right" }, 1500);

这些的CSS设置为显示：无

#line1,
#line2,
#line3{
display: none;
}

最佳答案

您可以采用这种方法，扩展Brad M的答案：

http://jsfiddle.net/mori57/Gqttc/

鉴于此HTML：

<div id="clickme">Click here</div>
<div id="lines">
    <div id="line1">
        <img src="http://placehold.it/350x40" alt="" />
    </div>
    <div id="line2">
        <img src="http://placehold.it/350x40" alt="" />
    </div>
    <div id="line3">
        <img src="http://placehold.it/350x40" alt="" />
    </div>
</div>

和这个CSS：

#lines div {
    opacity:0;
    margin-left:-400px
}

您可以将这种方法用于jQuery：

// get your lines into an array
var lines = $("#lines div");
// set a counter
var currAnim = 0;

// this method will animate a line
var fadeMoveIn = function (line) {
    $(line).animate({
        opacity: 1,
        marginLeft: 10
    }, {
        queue: true,
        duration: 1000,
        complete: function () {
            // when this line's animation is done
            // trigger the next in the queue
            startQueue();
        }
    });
};

// this function will fire off your animations one by one
var startQueue = function () {
    // increment the queue and send that line to be animated
    fadeMoveIn(lines[currAnim++]);
};

$("#clickme").click(function () {
    startQueue();
});

希望能给您一些管理方法的想法！布拉德（Brad）的方法是一个不错的开始，但它会同时为所有div设置动画，这并不是我认为您想要的效果。