Làm thế nào để chạy hai hình động jQuery cùng một lúc?

Có thể chạy hai hình động trên hai yếu tố khác nhau cùng một lúc không? Tôi cần ngược lại với câu hỏi này hoạt hình xếp hàng Jquery .

Tôi cần phải làm một cái gì đó như thế này ...

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

nhưng để chạy hai cái đó cùng một lúc Điều duy nhất tôi có thể nghĩ là sẽ sử dụng setTimeoutmột lần cho mỗi hoạt hình, nhưng tôi không nghĩ đó là giải pháp tốt nhất.

có, có!

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

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

Điều đó sẽ chạy đồng thời có. Điều gì nếu bạn muốn chạy hai hình động trên cùng một yếu tố?

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

Điều này kết thúc việc xếp hàng các hình ảnh động. để chạy chúng đồng thời, bạn sẽ chỉ sử dụng một dòng.

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

Có cách nào khác để chạy hai hình ảnh động khác nhau trên cùng một phần tử không?

Tôi tin rằng tôi đã tìm thấy giải pháp trong tài liệu jQuery:

Hoạt hình tất cả các đoạn thành kiểu trái 50 và độ mờ là 1 (mờ, có thể nhìn thấy), hoàn thành hoạt ảnh trong vòng 500 mili giây. Nó cũng sẽ làm điều đó bên ngoài hàng đợi, có nghĩa là nó sẽ tự động bắt đầu mà không cần chờ đến lượt .

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

chỉ cần thêm : queue: false.

Nếu bạn chạy như trên, chúng sẽ xuất hiện để chạy đồng thời.

Đây là một số mã kiểm tra:

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

Mặc dù sự thật là các cuộc gọi liên tiếp đến hoạt hình sẽ mang lại vẻ ngoài mà chúng đang chạy cùng một lúc, nhưng sự thật tiềm ẩn là chúng là những hình ảnh động riêng biệt chạy rất gần song song.

Để đảm bảo các hình ảnh động thực sự đang chạy cùng một lúc, sử dụng:

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

Các hình ảnh động khác có thể được thêm vào hàng đợi 'hoạt hình của tôi' và tất cả có thể được bắt đầu với điều kiện là hoạt hình cuối cùng của chúng.

Chúc mừng, Anthony

Xem bài đăng blog tuyệt vời này về hoạt hình các giá trị trong các đối tượng .. sau đó bạn có thể sử dụng các giá trị để làm động bất cứ thứ gì bạn thích, đồng thời 100%!

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

Tôi đã sử dụng nó như thế này để trượt vào / ra:

        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');
                }
            });
        }

Đăng câu trả lời của tôi để giúp ai đó, câu trả lời được đánh giá cao nhất đã không giải quyết được vấn đề của tôi.

Khi tôi thực hiện như sau [từ câu trả lời trên cùng], hoạt hình cuộn dọc của tôi chỉ bị xáo trộn qua lại:

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

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

Tôi đã đề cập đến: Các trường W3 Đặt Khoảng và nó đã giải quyết vấn đề của tôi, cụ thể là phần 'Cú pháp':

setInterval (hàm, mili giây, param1, param2, ...)

Có các tham số của biểu mẫu của tôi { duration: 200, queue: false }buộc thời lượng bằng 0 và nó chỉ nhìn vào các tham số để được hướng dẫn.

Dài và ngắn, đây là mã của tôi, nếu bạn muốn hiểu lý do tại sao nó hoạt động, hãy đọc liên kết hoặc phân tích các tham số dự kiến ​​khoảng:

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

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

Trong đó 'autoScroll' là:

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

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

Chúc mừng mã hóa!