0

画像を循環するスライド ショーがあり、それらの画像の上にテキストと 2 つの画像があります。私が望んでいるのは、アニメーション化しようとしている画像を見つけて実行することですが、各アニメーションの間に遅延が必要です。

私の難しさは、私には 3 つのスライドがあり、各スライドには背景に別々にアニメーション化する必要がある 2 つの画像を含めることができることです。スライドはユーザーの好みに基づいて配置されるため、フロント エンドの観点からは決してどの 2 つの画像がグループ化されるかは 100% 確実です。そのため、次のように記述しました。

if($(".current .iphone").length) {
        $(".current .iphone").animate({
            opacity :   1,
            left    :   "840px"
        }, 800);
    }
    if($(".current .blackberry").length) {
        $(".current .blackberry").animate({
            opacity :   1,
            left    :   "1119px"
        }, 800);
    }
    if($(".current .samsung").length) {
        $(".current .samsung").animate({
            opacity :   1,
            left    :   "783px"
        }, 800);
    }
    if($(".current .htc").length) {
        $(".current .htc").animate({
            opacity :   1,
            left    :   "900px"
        }, 800);
    }
    if($(".current .nokia").length) {
        $(".current .nokia").animate({
            opacity :   1,
            left    :   "823px"
        }, 800);
    }
    if($(".current .nokia").length) {
        $(".current .nokia").animate({
            opacity :   1,
            left    :   "823px"
        }, 800);
    }

そして、これが私のHTMLです。

<div id="slideshow" role="main" style="position: relative; overflow: hidden; ">
        <section data-background="_/images/elements/parralex-1.jpg">
            <img src="_/images/iphone-blue.png" alt="iPhone mybunjee" class="iphone foreground phone" />
            <img src="_/images/blackberry-pink.png" alt="Blackberry mybunjee" class="blackberry background phone" />
        </section>
        <section data-background="http://www.samtordoffracing.com/wp-content/uploads/2012/07/Tordoff-14.jpg">
            <img src="_/images/iphone-blue.png" alt="iPhone mybunjee" class="iphone foreground phone" />
            <img src="_/images/blackberry-pink.png" alt="Blackberry mybunjee" class="blackberry background phone" />
        </section>
        <section data-background="http://www.samtordoffracing.com/wp-content/uploads/2012/07/Tordoff-14.jpg">
            <div class="samsung foreground"></div>
            <div class="nokia foreground"></div>
        </section>
    </div>

基本的に私がやっていることは、現在のスライドにどの画像が存在するかを調べてからアニメーション化しようとしていますが、現在は両方の画像が同時にアニメーション化されており、一方の画像がアニメーション化されてから次。

私がしていることを行うためのより良い方法はありますか?

4

2 に答える 2

0

何をしようとしているのか完全には理解できませんが、jQuery 構造を変更しました。

hover ()やclick()など、このアクションのトリガー/イベントを定義する必要があります

コードを減らすためにこれを使用します。

$('.current').hover(function() {//mouse over event

    var currentClass = $(this).children().attr('class');//takes mouse overed element's chlid's class

    if($('.current .'+currentClass).length) {
            $(".current ."currentClass).animate({
                'opacity' :   '1',
                'left' : '840px'
            }, 800);
    }
});

トリガーイベントを定義したくない場合は、時限アニメーションにsetInterval()でeach()メソッドを使用できます。

于 2012-07-20T11:53:38.573 に答える