[JQUERY] 어떻게 동시에 두 개의 jQuery를 애니메이션을 실행하는?

어떻게 동시에 두 개의 jQuery를 애니메이션을 실행하는?

해결법

1. ---

   1.예있다!

   예있다!

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

2. ---

   2.즉 예 동시에 실행됩니다. 당신이 동시에 같은 요소에 두 개의 애니메이션을 실행하기를 원한다면?

   즉 예 동시에 실행됩니다. 당신이 동시에 같은 요소에 두 개의 애니메이션을 실행하기를 원한다면?

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

   이 애니메이션을 큐에 끝납니다. 당신은 하나의 라인을 사용하는 것이 동시에 실행 할 수 있습니다.

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

   동시에 같은 요소에 두 개의 서로 다른 애니메이션을 실행하는 다른 방법이 있습니까?

3. ---

   3.나는 내가 jQuery를 문서에서 해결책을 찾을 생각 :

   나는 내가 jQuery를 문서에서 해결책을 찾을 생각 :

   단순히 추가 : 큐 : 거짓을.

4. ---

   4.당신은 그들과 마찬가지로 이상 실행하면, 그들은 동시에 실행 나타납니다.

   당신은 그들과 마찬가지로 이상 실행하면, 그들은 동시에 실행 나타납니다.

   여기에 몇 가지 테스트 코드는 다음과 같습니다

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

5. ---

   5.이 애니메이션을 연속 통화가 동시에 실행되는 모양을 줄 것이다 사실이지만, 기본 진실은 그들이 평행에 가까운 실행하고 독특한 애니메이션이다.

   이 애니메이션을 연속 통화가 동시에 실행되는 모양을 줄 것이다 사실이지만, 기본 진실은 그들이 평행에 가까운 실행하고 독특한 애니메이션이다.

   애니메이션이 실제로 동시에 사용에서 실행 보장합니다 :

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

   또한 애니메이션은 '내-애니메이션'큐에 추가 할 수있는 모든 마지막 애니메이션 디큐 그들을의 제공 시작할 수 있습니다.

   건배, 안토니

6. ---

   6.객체의 값을 애니메이션에 대한이 훌륭한 블로그 게시물을 참조 ... 당신은 당신이 동시에 100 % 원하는대로 애니메이션의 값을 사용할 수 있습니다!

   객체의 값을 애니메이션에 대한이 훌륭한 블로그 게시물을 참조 ... 당신은 당신이 동시에 100 % 원하는대로 애니메이션의 값을 사용할 수 있습니다!

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

   나는 IN / OUT 슬라이드 같이 사용했습니다 :

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

7. ---

   7.도움말 사람에게 내 대답을 게시, 최고 등급의 대답은 내 현기증가 해결되지 않았다.

   도움말 사람에게 내 대답을 게시, 최고 등급의 대답은 내 현기증가 해결되지 않았다.

   나는 [정상 응답에서] 다음 구현 될 때, 내 수직 스크롤 애니메이션 단지 지터 앞뒤로 :

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

   내가 언급 : W3 학교 설정 간격 그것은, 즉 '구문'섹션을 내 문제를 해결 :

   {: (200), 큐 : 기간 거짓} 형태의 내 매개 변수를 갖는 것은 0의 시간을 강제 그것은 단지 지침에 대한 매개 변수를 바라 보았다.

   당신이 간격 예상 매개 변수를 작동 이유를 이해 링크를 읽거나 분석 할 경우 장기 및 단기, 여기에 내 코드입니다 :

   var $scrollDiv = '#mytestdiv';
   var $scrollSpeed = 1000;
   var $interval = 800;
   
   function configureRepeats() {
      window.setInterval(function () {
          autoScroll($scrollDiv, $scrollSpeed);
      }, $interval, { queue: false });
   };
   

   어디 '자동 스크롤이'입니다 :

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

   코딩 해피!

from https://stackoverflow.com/questions/1251300/how-to-run-two-jquery-animations-simultaneously by cc-by-sa and MIT license