2

我有以下代码，它可以很好地向左滚动我的 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;
}
4

3 回答 3

3

您可以采用这种方法，扩展 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 设置动画，这不是我认为您正在寻找的效果。

于 2013-02-21T21:31:50.740 回答
0

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

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

确保 div 最初的不透明度为 0%，并且您需要尝试使用正确的宽度。

于 2013-02-21T21:04:37.200 回答
0

试试这个：

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

例如，我将它绑定到点击事件，但您可以根据需要获取该功能并使用。此外，如果你给所有的 div 一个公共类，你可以一次移动它们：

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

这是一个 JSFiddle示例

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

$('#div1').animate({"width": toggle, "opacity": "toggle" }, "slow");
于 2013-02-21T21:43:01.903 回答