2014-03-27 1 views
1

http://jsfiddle.net/ZGnTe/

function iphoneAnimate() { 
     $('.iphone-screen div').repeat().css({ 
     opacity: 0, 
     top: 0 
    }) 
     .each($).fadeTo(1000, 1).animate({ 
     top: $('.iphone-screen').height() - $(this).find('img').height() 
    }, 4000).fadeTo(1000, 0, $); 
} 

iphoneAnimate(); 

$ (이) 이미지가 포함 된 div를 반환하지 않습니다. $ (this) 내에서 img 태그의 높이를 얻으려고 할 때 전혀 값을 반환하지 않습니다. jquery-timing 플러그인을 사용하고 있지만 플러그인이 아니라 구문에 문제가 있다고 생각합니다. 확실하지 않은 tho.

최고 값은 음수 여야합니다. 예를 들어 .iphone-screen (577)의 높이에서 현재 divs 이미지의 높이를 뺀 값 (첫 번째 값은 1375)입니다. 이렇게하면 이미지 div가 움직여서 화면의 이미지 아래쪽에 도달합니다.

+4

은 무엇인가'.each는 ($)가 '어떻게해야? –

+0

다음 명령을 모두 실행할 순회 루프를 만드는 것입니다. http://creativecouple.github.io/jquery-timing/api/each/.each_sequential.html –

+0

@YanBrunet : 그래서'.each'의 동작을 변경하는 플러그인입니까? 왜냐하면 일반적으로'.each ($)'는 절대적으로 아무것도하지 않기 때문입니다. –

답변

0

체인 된 요소 중 하나 뒤에 콜백 함수를 사용해야합니다. 그렇지 않으면 값은 한 번만 계산됩니다.

function iphoneAnimate() { 
    $('.iphone-screen div').repeat().css({ 
     opacity: 0, 
     top: 0 
    }) 
    .each($) 
    .fadeTo(1000, 1) 
    .then(function(){ 
     $(this).animate({top: $('.iphone-screen').height() - $(this).height() 
                   },4000);}) 
    .fadeTo(1000, 0, $); 
} 

iphoneAnimate(); 

근무 데모 : http://jsfiddle.net/ZGnTe/2/

0

아마 .animate() 함수에 전달하는 속성이 함수 자체가 아니기 때문입니다.

같은 결과를 얻을 수있는 다른 선택기를 사용해보세요. 예 : http://jsfiddle.net/ZGnTe/1/


내가 "이"개체에만 콜백 기능에 액세스 할 수 있다고 생각 :

function iphoneAnimate() { 
    $('.iphone-screen div').repeat().css({ 
     opacity: 0, 
     top: 0 
    }) 
     .each($).fadeTo(1000, 1).animate({ 
     top: $('.iphone-screen').height() - $('div img').height() 
    }, 4000).fadeTo(1000, 0, $); 
} 

여기에 바이올린에 대한 링크입니다.

은 애니메이션이 적용되는 경우에만 항목을 aquire (예 : .filter(":animated")로) 필터를 추가 할 수 있으며, "DIV IMG"선택의 일반성을 보상합니다.

다음 예와 같이 각 기능을 확장하는 것이 좋습니다 (https://api.jquery.com/each/#example-1).

0

나는 $ (this)라는 표현이 iPhoneAnimate 메소드의 컨텍스트에서 평가되고 있습니다. 특정 컨텍스트없이 메서드를 호출하기 때문에이 메서드는 아무 것도 평가하지 않습니다.

대리인 또는 익명 메소드 내에서 액세스하는 경우 jquery 객체의 컨텍스트로 평가됩니다.

관련 문제