Question

我有以下代码，它可以很好地滚动我的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设置为display：none

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

Answer 1

你可以采取这种方法，扩展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();
});

希望能为您提供有关如何管理此方法的一些想法！布拉德的方法是一个好的开始，但它会同时为你的所有div制作动画，这不是我认为你正在寻找的效果。

Answer 2

尝试使用.animate（）方法。类似于以下内容

$(divs).animate({
     width: 100,
     opacity: 100
});

确保div最初的不透明度为0％，您需要尝试正确的宽度。

Answer 3

试试这个：

$("#div1").click(function() {
     $('#div1').animate({"left": -200, "opacity": "toggle" }, "slow");
});

对于示例我将此绑定到click事件，但您可以根据需要使用该函数并使用它。另外，如果你给所有的div一个普通的类，你可以一次性移动它们：

 $('.moveMe').animate({"left": -200, "opacity": "toggle" }, "slow");

这是一个JSFiddle example

编辑：您还可以使用toggle根据宽度向左滑动div：

$('#div1').animate({"width": toggle, "opacity": "toggle" }, "slow");

jQuery同时向左滚动和淡入淡出

3 个答案: