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

これを管理する方法についてのアイデアが得られることを願っています! ブラッドの方法は良い出発点ですが、すべての 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 に答える