Jakub Arnold
그는 물었다 11년 전
206

애니메이션 2 jQuery 동시에 실행하는 방법?

애니메이션 2 개의 서로 다른 두 가지 요소를 동시에 실행할 수 있습니까? 이 질문의 데릭쉐퍼드와 반대 https://stackoverflow.com/questions/668104/jquery-queueing-animations.

내가 해야 할 일은 이 같은 일이.

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

그러나 이 두 실행하십시오 동시에건간에. 내가 생각할 수 있는 유일한 약간만이라도 사용하여 각 애니메이션에 대해 한 번, but I ',' setTimeout don& # 39 이것은 최선의 해결책이 없는 것 같습니다.

chaos
그는 11년 전 댓글을 달았습니다
0

Erm. 당신은 노력은 한 것 같습니다. 거기 있는지 파악하고 정확한 코드를 사용하는 경우, 우리 () '는' 애니메이션할 동시에 실행할 수 있어야 한다.

Russ Cam
그는 11년 전 댓글을 달았습니다
0

여깄네요 - http://jsbin.com/axata. 코드 추가 / 편집 볼 수 있습니다.

valk
그는 7년 전 댓글을 달았습니다
0

내가 볼 때 큰 문제가 다른 CSS 속성을. I put it in the 이스피들 되며, 이 질문은 두 방식 모두 작동합니까 것 같아 보인다. 여전히 로만스였나 관련? http://jsfiddle.net/AVsFe/

Chris Moschini
그는 6년 전 댓글을 달았습니다
3

이후, 내가 믿는 jQuery 의 현재 jquery 1.4, 위의 코드는 두 가지를 동시에, fx 는 이후 애니메이션할 대기열은 첨부됩니다 전화하시기 요소가 아닌 스이니마티 () 에 노드전역 대기열은.

Chris Moschini
그는 6년 전 댓글을 달았습니다
0

위 이스빈 죽었어요. 동일한, 이스피들 작동하는: http://jsfiddle.net/b9chris/a8pwbhx1/

답변 7 개

네 있습니다!

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

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

Lee Taylor
dotty
그는 9년 전 댓글을 달았습니다
14

39 ',' t know about that 대기열은 가변적입니다 didn& 이 주셔서 감사합니다!

pilau
그는 7년 전 댓글을 달았습니다
4

Jquery 는 어떤 함수를 반군지역 목적을 여쭤봐도 될까요?

Raphael Michel
그는 7년 전 댓글을 달았습니다
12

이 때 @pilau 실행됨을 문서가 준비되었음. 이것은 $ (document) 그레이디 (함수 () {}), 약어입니다 javascript 코드를 넣어 요소는 정의마다 전에 수 있습니다.

Emanuele Del Grande
그는 7년 전 댓글을 달았습니다
0

그러나 이후 작동하잖아 성능 측면에서 최적의 솔루션을 δ1 jQuery 에서 것은 서로 다른 두 타이머를 사용한다. 타이머 동일하게 사용할 수 있는 방법이 있는 jQuery?

AlexK
그는 7년 전 댓글을 달았습니다
1

넌 할 수 있어 먹는 설정되었습니다 큐에 참 / 거짓 또는 give it 문자열으로 (대기열은 이름) 이 방법을 사용하여, 애니메이션 모두 동일한 타이머.

Crisan Raluca Teodora
그는 6년 전 댓글을 달았습니다
0

난 콜백 함수를 사용하여 다음과 같습니다. 만약 내가, 200, 함수 () {} 로 교체해야 할 것 같은데. }, {기간: 200, 대기열은: 거짓값 함수 () {}, 뭔가 제대로 작동하지. 모든 리디아?

ThePianist
그는 6년 전 댓글을 달았습니다
0

@CrisanRalucaTeodora, 그냥 이렇게 사용 할 수 있습니다. {기간: 200, 대기열은: 거짓값 완료 후 실행될 코드를 애니메이션}} {/ / 함수 ():

jmchauv
그는 4년 전 댓글을 달았습니다
3

이 얼마나 투석실에다가 oncomp레티 추가?

동시에 실행할 것이라고 그렇습네다. 하고 싶은 와일드링이 실행하십시오 같은 요소에 두 애니메이션을 동시에?

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

이 대기시키려면 motor1.1end up 이 애니메이션을 꼽았다. 한 줄만 얻기 위해 사용하는 것과 동시에 실행할 수 있습니다.

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

다른 방법은 두 개의 서로 다른 애니메이션 같은 요소에 유지됩니까 실행하십시오 동시에?

I believe I found 솔루션 붽뎄 포함한다.

&gt. 모든 왼쪽 스타일입니까 단락을 애니메이션 &gt. 50 대 1 의 불투명도와 (불투명도로, &gt. 가시적입니다), 애니메이션 완료 &gt. 범위 500 밀리초입니다. 또한 &gt. 즉, 위부의 대기열은 do it &gt. 없이 자동으로 시작됩니다 &gt. 선반가공 기다리고 있다. &gt. &gt. $ (&quot p"; 스이니마티 ({) &gt. 왼쪽: &quot 50px&quot 불투명도와:;; 1 &gt. }, {기간: 500, 대기열은: 거짓값}).

추가하면 됩니다. '대기열은: 거짓값 '.

Tim Cooper
Brainfeeder
그는 7년 전 댓글을 달았습니다
1

완전한 기능을 통합 방법을 여기있을 번호요? s

있는 그대로 실행할 경우 위의 실행하십시오 나타나므로 시무라타누오리.

39 의 here& 몇 가지 테스트 코드:

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

39 의 it& 동안 통화한 사실이 연속적입니다 애니메이션할 모양을 부여하느뇨 동시에 실행할 수 (受) 는, 애니메이션, re) 와 아주 가까운 # 39 를 기본 거짓하였으니 they& 평행광.

그러나 이 애니메이션을 동시에 실행할 수 있다 갈 수 있습니다.

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

39, & # 39 my-animation& 애니메이션 더 추가할 수 있습니다. # 39 의 애니메이션 dequeue& 대기열은 및 모든 시작할 수 있는 마지막 저들이요 제공했다.

건배, 앤서니

이 찬란한 지켜보리니 의 애니메이션 값을 객체에는. whatever you like 애니메이션할 값을 100%, 동시에 사용할 수 있습니다!

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

39, ve 사용되는 i& 마치 이 슬라이드에서는 입 / 출력:

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

PhiLho
그는 5년 전 댓글을 달았습니다
1

다시 볼 수 있는 링크가 죽은 emc. ://www.josscrowcroft.com/2011/code/jquery-animate-increment-decrement-numeric-text-elements-value # https://web.archive.org/web/20150101065437/http

누군가 내 글을 위해 오토메이티드 도움말에서는 didn& # 39, 현기증, 상위 등급 오토메이티드 내 해결할 수 없다.

When I 구축됩니까 다음 [위에서 오토메이티드], 세로 스크롤 애니메이션 그냥 내 터링 앞뒤로:

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

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

내가) 라고 불리기도 한다. W3 학교 간격 설정 # 39, & # 39) 와 정보기술 (it), 즉 syntax& 내 문제가 해결되었습니다. microprocessors

&gt. setInterval (함수, 밀리초입니다, param1, param2.)

이 형태의 '내 매개변수입니다 {기간: 200, 대기열은: 결국 거짓값} '제로 및 기간 도함을 매개 변수를 바라볼 뿐이다.

39 의 내 코드, 길고 짧은 here& 스케쳐내 작동하잖아, 읽기 링크 또는 분석 시간 간격까지입니다 매개변수입니다 납득할 수 있을 것으로 보인다.

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

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

여기서 & # 39 autoScroll& # 39;; 입니다.

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

    //Scroll to top immediately 
    $($scrollDiv).animate({
        scrollTop: 0
    }, 0);
즐거운 코딩!