0

我有一个div由两个 s 分开的标志span，目前我在第一个褪色，然后在第二个褪色。现在我正在尝试触发三个跨度，并希望同时发生三个动作，淡入所有三个元素，同时使用 CSS 属性 margin_left、margin-right 和 margin-top 将它们移动到位。以下函数在第一个跨度的淡入淡出完成后触发所有进一步的操作。你们中的任何人都可以给我一个提示如何触发同时发生的动作吗？

<script>
$('#logo span').eq(0).fadeIn(10000, function(){
    //this is the callback function.
    //when the above fade completes, anything in here will run immediately after.
    $('#logo span').eq(1).fadeIn(5000);
    $('#logo span').animate({ 'margin-top': '-210' }, 'slow');
});</script>
4

4 回答 4

1

你真的有两个选择。

第一个选项是使用queue: falsewithanimate让一切立即发生。任何被调用的动画queue: false都会立即开始。

$('#logo span').eq(1).animate({opacity: 1}, {duration: 5000, queue: false}); 
$('#logo span').animate({ 'margin-top': '-210' }, {duration: 'slow', queue: false});

如果动画的持续时间相同，另一种选择是在一次调用animate. 这样，两个效果都被认为是一个单独的动画，并一起执行。

$('#logo span').animate({ 
    'margin-top': '-210',
    opacity: 1
}, 'slow');

编辑：

如果您的动画开始变得非常复杂，另一种选择是使用多个命名队列。这使您能够一次拥有多个单独的动画，同时仍然保持对相关动画进行排队的能力。我拼凑的一个小例子可以在这里找到：

http://jsfiddle.net/5PuPT/

注意位置变化和不透明度变化如何作用于独立队列。这使得每个相关动画都等待其类型的其他动画完成，但不会等待不同队列上的动画。

如果您制作的动画只是您的问题中的内容，那么这绝对是矫枉过正。如果您有一组更复杂的动画，这可能是一种需要考虑的方法。

于 2012-10-04T17:35:12.027 回答
0

只需给他们所有相同的类名，然后使用该类调用它们。

$('.myClass').fadeIn(5000,....etc

于 2012-10-04T17:35:55.160 回答
0

谢谢大家在这里发帖。这就是我最终想出的并让它为我工作。在绝对定位的 div 中触发两个跨度，具体取决于第一个跨度的淡入结束。在为 span 设置 display:none 并定义零 margin-left 时，您可以在 span 中定义一个正或负的 margin-left，让它们从右侧或左侧飞入，同时淡入。

感谢所有实现它的人。祝你今天过得愉快！

<script>
$('#logo span').eq(0).fadeIn(10000, function(){
    //this is the callback function.
    //when the above fade completes, anything in here will run immediately after.
    $('#logo span').eq(1).fadeIn(5000);
    $('#logo span').eq(1).animate({ 'margin-left':'0' }, {duration:8000, queue: false});
     $('#logo span').eq(2).fadeIn(5000);
    $('#logo span').eq(2).animate({ 'margin-left':'0' }, {duration:5000, queue: false});
});</script>
于 2012-10-04T19:40:33.773 回答
-1

再次感谢你们在这里给我的所有帮助。我插入了一个字体大小的动画，它给它一个很好的画龙点睛的效果。万一你需要这个，我想把它添加为最后的帖子和答案！萨鲁多斯！

<!-- targeting the first, second and third logo span (image logo) to be faded in right after another, being moved synchroniously, animating font-size and finally displayed in a opocity -->
    <script>
    var oldSize = parseFloat($("#logo span.movie").css('font-size'));     
    var newSize = oldSize  * 3.9;
    $('#logo span').eq(0).fadeIn(1000, function(){
    //this is the callback function.
    //when the above fade completes, anything in here will run immediately after.
    $('#logo span').eq(1).fadeIn(800);
            $('#logo span').eq(1).animate({ 'margin-left':'0' }, {duration:5000, queue: false});
        $('#logo span').eq(2).fadeIn(5000);
            $('#logo span').eq(2).animate({ 'margin-left':'0' }, {duration:5000, queue: false});
                    $('#logo span').eq(0).animate({opacity: 0.7}, {duration: 5000, queue: false});
                    $('#logo span').eq(1).animate({opacity: 0.6}, {duration: 9000, queue: false});
                    $('#logo span').eq(2).animate({opacity: 0.9}, {duration: 5000, queue: false});
                    $("#logo span").eq(2).animate({ fontSize: newSize}, {duration: 5000, queue: false});        

    });</script>
于 2012-10-06T18:19:55.600 回答