javascript - stop - كيف تشغل اثنين من jQuery animations في وقت واحد؟




jquery effects (4)

أعتقد أنني وجدت الحل في وثائق jQuery:

يقوم بتشكيل كل فقرة إلى النمط الأيسر من 50 وعتامة 1 (معتم ، ظاهر) ، وإكمال الرسم المتحرك خلال 500 ميلي ثانية. كما أنها ستفعل ذلك خارج قائمة الانتظار ، مما يعني أنها ستبدأ تلقائيًا دون انتظار دورها .

$( "p" ).animate({
  left: "50px", opacity: 1
}, { duration: 500, queue: false }); 

ببساطة إضافة: queue: false .

هل من الممكن تشغيل اثنين من الرسوم المتحركة على عنصرين مختلفين في وقت واحد؟ أنا في حاجة إلى عكس هذا السؤال Jquery queuing animations .

أحتاج أن أفعل شيئًا كهذا ...

$('#first').animate({ width: 200 }, 200);
$('#second').animate({ width: 600 }, 200);

ولكن لتشغيل هذين في نفس الوقت. الشيء الوحيد الذي يمكنني التفكير فيه هو استخدام setTimeout مرة واحدة لكل setTimeout متحرك ، لكنني لا أعتقد أنه أفضل حل.


إذا قمت بتشغيل ما سبق كما هو ، فسيظهر أنها تعمل بشكل متزامن.

هنا بعض كود الاختبار:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(function () {
    $('#first').animate({ width: 200 }, 200);
    $('#second').animate({ width: 600 }, 200);
});
</script>
<div id="first" style="border:1px solid black; height:50px; width:50px"></div>
<div id="second" style="border:1px solid black; height:50px; width:50px"></div>

شاهد هذا المنشور اللامع حول تنشيط القيم في الكائنات .. يمكنك عندها استخدام القيم لتحريك كل ما تحب ، 100٪ في وقت واحد!

http://www.josscrowcroft.com/2011/code/jquery-animate-increment-decrement-numeric-text-elements-value/

لقد استعملتها على هذا النحو للتسلل إلى الداخل / الخارج:

        slide : function(id, prop, from, to) {
            if (from < to) {
                // Sliding out
                var fromvals = { add: from, subtract: 0 };
                var tovals = { add: to, subtract: 0 };
            } else {
                // Sliding back in
                var fromvals = { add: from, subtract: to };
                var tovals = { add: from, subtract: from };
            }

            $(fromvals).animate(tovals, {
                duration: 200,
                easing: 'swing', // can be anything
                step: function () { // called on every step
                    // Slide using the entire -ms-grid-columns setting
                    $(id).css(prop, (this.add - this.subtract) + 'px 1.5fr 0.3fr 8fr 3fr 5fr 0.5fr');
                }
            });
        }

في حين أنه صحيح أن المكالمات المتتالية لتحريك تعطي مظهر أنها تعمل في نفس الوقت ، فإن الحقيقة الأساسية هي أنها متحركة متميزة تعمل بالقرب من متوازي.

للتأكد من أن الرسوم المتحركة تعمل بالفعل في الوقت نفسه ، استخدم:

$(function() {
    $('#first').animate({..., queue: 'my-animation'});
    $('#second').animate({..., queue: 'my-animation'}).dequeue('my-animation');
});

يمكن إضافة رسوم متحركة إضافية إلى قائمة انتظار "my-animation" الخاصة بنا ، ويمكن بدء كل ذلك بشرط أن يكون آخر حفل للرسوم المتحركة.

ابتهاج ، أنتوني





animation