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




how to (6)

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

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

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

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


Answers

التي من شأنها أن تعمل في وقت واحد نعم. ماذا لو كنت تريد تشغيل اثنين من الرسوم المتحركة على نفس العنصر في وقت واحد؟

$(function () {
    $('#first').animate({ width: '200px' }, 200);
    $('#first').animate({ marginTop: '50px' }, 200);
});

هذا ينتهي اصطف في الحركات. للحصول على تشغيلها في وقت واحد سوف تستخدم سطر واحد فقط.

$(function () {
    $('#first').animate({ width: '200px', marginTop:'50px' }, 200);
});

هل هناك أي طريقة أخرى لتشغيل اثنين من الرسوم المتحركة المختلفة على نفس العنصر في وقت واحد؟


نعم هنالك!

$(function () {
    $("#first").animate({
       width: '200px'
    }, { duration: 200, queue: false });

    $("#second").animate({
       width: '600px'
    }, { duration: 200, queue: false });
});

شاهد هذا المنشور اللامع حول تنشيط القيم في الكائنات .. يمكنك عندها استخدام القيم لتحريك كل ما تحب ، 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" الخاصة بنا ، ويمكن بدء كل ذلك بشرط أن يكون آخر حفل للرسوم المتحركة.

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


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

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

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

if($("#checkkBoxId").is(':checked')){
  alert("Checked=true");
}

أو

if($("#checkkBoxId").attr('checked') == true){
  alert("checked=true");
}




javascript jquery animation