[javascript] 두 개의 jQuery 애니메이션을 동시에 실행하는 방법은 무엇입니까?

두 개의 다른 요소에서 두 개의 애니메이션을 동시에 실행할 수 있습니까? 이 질문 Jquery queuing animations 의 반대가 필요합니다 .

나는 이런 식으로해야합니다 …

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

추가 애니메이션은 ‘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');
                }
            });
        }

답변

누군가를 돕기 위해 내 대답을 게시해도 최고 등급의 대답은 내 소름을 풀지 못했습니다.

[대답에서] 다음을 구현할 때 세로 스크롤 애니메이션이 앞뒤로 흔들 렸습니다.

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

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

나는 W3 Schools Set Interval을 언급했으며 내 문제, 즉 ‘구문’섹션을 해결했습니다.

setInterval (함수, 밀리 초, param1, param2, …)

양식의 매개 변수를 사용하면 { duration: 200, queue: false }지속 시간이 0이되고 지침을 위해 매개 변수 만 보았습니다.

길고 짧은, 여기 내 코드가 있습니다. 왜 작동하는지 이해하려면 링크를 읽거나 예상되는 간격 매개 변수를 분석하십시오.

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

행복한 코딩!