วิธีการรันภาพเคลื่อนไหว jQuery สองภาพพร้อมกันได้อย่างไร

เป็นไปได้หรือไม่ที่จะรันอนิเมชั่นสองตัวบนองค์ประกอบที่แตกต่างกันสองอย่างพร้อมกัน? ฉันต้องตรงข้ามของคำถามนี้Jquery ภาพเคลื่อนไหวการเข้าคิว

ฉันต้องทำอะไรเช่นนี้ ...

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

แต่ในการรันทั้งสองในเวลาเดียวกัน สิ่งเดียวที่ฉันคิดว่าน่าจะใช้setTimeoutเพียงครั้งเดียวสำหรับแต่ละอนิเมชั่น แต่ฉันไม่คิดว่ามันเป็นทางออกที่ดีที่สุด

ใช่แล้ว!

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

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

ที่จะทำงานพร้อมกันใช่ เกิดอะไรขึ้นถ้าคุณต้องการที่จะเรียกใช้สองภาพเคลื่อนไหวในองค์ประกอบเดียวกันพร้อมกัน?

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

เรื่องนี้จบลงด้วยการจัดคิวภาพเคลื่อนไหว หากต้องการเรียกใช้พร้อมกันคุณจะใช้เพียงหนึ่งบรรทัด

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

มีวิธีอื่นอีกไหมในการรันแอนิเมชั่นสองแบบที่ต่างกันในองค์ประกอบเดียวกันพร้อมกัน?

ฉันเชื่อว่าฉันพบวิธีแก้ปัญหาในเอกสารประกอบ jQuery:

แอนิเมชั่นย่อหน้าทั้งหมดเป็นสไตล์ด้านซ้ายที่ 50 และความทึบของ 1 (ทึบแสงที่มองเห็นได้) ทำให้แอนิเมชั่นสำเร็จภายใน 500 มิลลิวินาที นอกจากนี้ยังจะทำมันนอกคิวซึ่งหมายความว่ามันจะเริ่มต้นโดยอัตโนมัติโดยไม่ต้องรอการเปิด

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

queue: falseเพียงแค่เพิ่ม:

หากคุณเรียกใช้ข้างต้นพวกเขาจะปรากฏขึ้นเพื่อทำงานพร้อมกัน

นี่คือรหัสทดสอบบางส่วน:

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

ในขณะที่มันเป็นความจริงที่การเรียกภาพเคลื่อนไหวอย่างต่อเนื่องจะให้ภาพที่ปรากฏในเวลาเดียวกัน

เพื่อให้แน่ใจว่าภาพเคลื่อนไหวนั้นทำงานในเวลาเดียวกัน:

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

ภาพเคลื่อนไหวเพิ่มเติมสามารถเพิ่มลงในคิว 'ภาพเคลื่อนไหวของฉัน' และทั้งหมดสามารถเริ่มต้นได้หากภาพเคลื่อนไหวสุดท้ายของภาพเคลื่อนไหว

ไชโยแอนโทนี่

ดูบล็อกโพสต์ที่ยอดเยี่ยมเกี่ยวกับการเคลื่อนไหวค่าในวัตถุ .. จากนั้นคุณสามารถใช้ค่าในการสร้างภาพเคลื่อนไหวได้ตามต้องการ 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');
                }
            });
        }

การโพสต์คำตอบของฉันเพื่อช่วยเหลือใครบางคนคำตอบที่ได้รับคะแนนสูงสุดไม่สามารถแก้ไข qualm ของฉันได้

เมื่อฉันติดตั้ง [จากคำตอบยอดนิยม] ต่อไปนี้ภาพเคลื่อนไหวการเลื่อนแนวตั้งของฉันจะสั่นไปมา:

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

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

ฉันอ้างถึง: โรงเรียน W3 กำหนดช่วงเวลาและจะแก้ไขปัญหาของฉัน ได้แก่ ส่วน 'ไวยากรณ์':

setInterval (ฟังก์ชั่น, มิลลิวินาที, param1, param2, ... )

มีพารามิเตอร์ของแบบฟอร์ม { duration: 200, queue: false }บังคับระยะเวลาเป็นศูนย์และจะดูเฉพาะพารามิเตอร์สำหรับคำแนะนำเท่านั้น

ยาวและสั้นนี่คือรหัสของฉันถ้าคุณต้องการที่จะเข้าใจว่าทำไมมันทำงานอ่านลิงค์หรือวิเคราะห์พารามิเตอร์ช่วงเวลาที่คาดหวัง:

var $scrollDiv = '#mytestdiv';
var $scrollSpeed = 1000;
var $interval = 800;

function configureRepeats() {
   window.setInterval(function () {
       autoScroll($scrollDiv, $scrollSpeed);
   }, $interval, { queue: false });
};

ที่ 'autoScroll' อยู่ที่:

    $($scrollDiv).animate({
        scrollTop: $($scrollDiv).get(0).scrollHeight
    }, { duration: $scrollSpeed });

    //Scroll to top immediately 
    $($scrollDiv).animate({
        scrollTop: 0
    }, 0);

การเข้ารหัสที่มีความสุข!