Question

我有一个徽标div被两个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>

Answer 1

你真的有两种选择。

第一个选项是queue: false与animate一起使用，让一切都发生。使用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/

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

如果您所有的动画都是您在问题中所拥有的，那么这绝对有点过分。如果你有一套更复杂的动画，这可能是一种需要考虑的方法。

Answer 2

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

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

Answer 3

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

向所有实现这一目标的人致敬。祝你有愉快的一天！

<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>

Answer 4

再次感谢大家在这里给你的所有帮助。我插入了一个字体大小的动画，给它一个很好的画龙点睛。如果您需要这个，我想将其添加为最终帖子并回答！ Saludos！

<!-- 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>

在JQuery中同时执行操作

4 个答案: