1

JSFiddle：小提琴

它应该工作的方式如下：

1 - 红色块从上到下滑动
2 - 完成后红色框淡出
3 - 然后蓝色框淡入

以下是html：

<div class="posRel">
    <div class="trans1"></div>
    <div class="trans2"></div>
    <div class="trans3"></div>
    <div class="trans4"></div>
    <div class="trans5"></div>
    <div class="trans6"></div>
    <div class="trans7"></div>
</div>

以下是js：

    for (i = 1; i <= 7; i++) {
        $('.trans' + i).toggleClass('toggle');
    }

    setTimeout(function () {
        $('.toggle').fadeOut('slow', function () {
            $(this).addClass('fSmall1').fadeIn('slow');
        });
    }, 2000);

项目链接：http://50.87.144.37/~projtest/team/design/EO/page-2.html

链接到JSFiddle

我面临的问题：

  • 淡出和淡入不工作
  • 有什么比 settimeout 更好的方法来做到这一点？

当谈到 js/jQuery 时，我相当缺乏经验，所以也请随时指出任何愚蠢的错误。谢谢。

4

3 回答 3

1

我将尝试一次性解决您的大部分问题，但我怀疑我们可能需要来回一些时间才能完全解决它。

首先，您的淡入/淡出问题与触发动画的方式有关。您本质上是在每个元素上单独调用淡出然后淡入，但是根据您在需求中描述的功能，您应该在容器上触发一个淡入：

for (i = 1; i <= 7; i++) {
    $('.trans' + i).toggleClass('toggle');
}

setTimeout(function () {
    $('.posRel').fadeOut('slow', function () {
        $('.toggle').addClass('fSmall1');
        $('.posRel').fadeIn('slow');
    });
}, 2000);

小提琴

平稳过渡

如果你想要平滑的淡入淡出而不让它闪烁然后再回来，你可以使用fadeTo()方法。可以在下面找到 FadeTo() 示例，这将使所有形状下降，暂停几分之一秒，然后改变颜色。您可以尝试删除 setTimeout ，因为 fadeTo 控制动画时间，但我已将其尽可能接近原始时间。

for (i = 1; i <= 7; i++) {
    $('.trans' + i).toggleClass('toggle');
}

setTimeout(function () {
    $('.posRel').fadeTo('slow', 2, function () {$('.toggle').addClass('fSmall1');});
}, 2000);

fadeTo() 示例小提琴

于 2013-06-19T07:02:11.370 回答
1

如果您使用的是 jQueryUI，这将起作用：

http://jsfiddle.net/zcYLM/11/（这是一个更新的）

这是一个基本的、精简的问题示例，但您可以将其应用于您的代码。

JS：

$(document).ready(function() {
    $('div[class*=trans]')
        .toggleClass('toggle', 2000)
        .promise()
        .done(function() {
            $(this)
                .fadeOut(2000)
                .promise()
                .done(function() { 
                    $(this)
                        .addClass('blue')
                        .fadeIn(2000);
                });
        });
});

CSS：

.posRel {
    position:relative;
}

div.posRel > div {
    background-color:red;
    position:absolute;
    top:0px;
    width:100px;
    height:100px;
}

div.posRel > div.trans1 { left:-50px; }
div.posRel > div.trans1.toggle { left:100px; top:150px; }
div.posRel > div.blue { background-color:blue; }
于 2013-06-19T07:04:10.700 回答
1

我使用了 fadeto 属性，请尝试链接。http://jsfiddle.net/zcYLM/10/

[http://jsfiddle.net/zcYLM/10/][1]


  [1]: http://jsfiddle.net/zcYLM/10/
于 2013-06-19T07:06:15.233 回答