设置元素动画jquery

Animating elements jquery

本文关键字：jquery 动画 元素 设置      更新时间：2023-12-01

我有一个幻灯片，它在图像中循环播放，然后在这些图像上方我有一些文本，然后是两个图像。我想做的是弄清楚我试图制作哪些图像的动画，但我想在每个动画之间有一个延迟。

我的困难在于，我有3张幻灯片，每张幻灯片可以有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>

基本上，我正在做的是试图找出当前幻灯片中存在哪些图像，然后进行动画制作，但目前两个图像都同时进行动画制作。我希望在一个图像进行动画制作和下一个图像之间有一个随机延迟。

有没有更好的方法来做我正在做的事情？

您可以尝试以下操作：

     $.each($('#slideshow').find('img'), function(i, img){
            if($(img).hasClass('iphone')){
                setTimeout(
                    function(){
                        $(img).animate({
                            opacity : .5,
                            'margin-left' : "+=40px"
                        }, 800)
                    }, Math.random() * i *800);
            }
            if($(img).hasClass('blackberry')){
                setTimeout(
                    function(){
                        $(img).animate({
                            opacity : .5
                            'margin-left' : "-=40px"
                        }, 800)
                    }, Math.random() * i *800);
            }
    });

无论如何，这里有一些例子，看看这个例子。

我不完全理解你想做什么，但我改变了你的jQuery结构。

您需要为此操作定义一个trrigger/事件，如悬停（）或单击（）

使用这个来减少代码：

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

如果不想定义触发事件，可以将each（）方法与setInterval（）一起用于定时动画。

相关文章：