YUI가 하나의 div에 애니메이션을 적용하고 다른 것에 변색합니다.

Question

div 'introduction'을 애니메이션화하여 '시작하려면 여기를 클릭하십시오'라는 링크를 클릭하면 높이와 너비가 0이됩니다. the 'Test'라는 또 다른 div는 동일한 이벤트에서 페이드 인해야합니다. 불행히도 작동하지 않습니다. 나는 YUI를 처음 사용하고 있으며 this을 출처로 사용하고 있습니다.

jsFiddle : http://jsfiddle.net/pV8eT/1/

코드 :

(function() { 
    var introductionAttributes = { 
     width: { to: 0 }, 
     height: { to: 0 } 
    }; 
    var theTestAttributes = { 
     visible: { to: true }, 
     width: { to: 500 }, 
     height: { to: 500 } 
    }; 
    var introductionAnim = new YAHOO.util.Anim('introduction', introductionAttributes); 
    var theTestAnim = new YAHOO.util.Anim('theTest', theTestAttributes); 

    YAHOO.util.Event.on('startTest', 'click', function() { 
     introductionAnim.animate(); //this works 
     theTestAnim.animate();  //this doesnt work :(
    }); 
})(); 

어떻게 "theTest"사업부에 페이드 코드를 수정합니까?

Answer 1

제 생각에 문제는 display: none이며 공개 상태입니다. 그러나 YUI 2 지식이 제한적이어서 문제를 해결하는 방법을 모르겠습니다. 내가 YUI3에서 그것을 할 거라고 방법은 다음과

는 :

YUI().use('transition', function (Y) { 
    var introduction = Y.one('#introduction'), 
     test = Y.one('#theTest'); 

    Y.one('#startTest').on('click', function (e) { 
    e.preventDefault(); 

    introduction.transition({ 
     width: 0, 
     height: 0 
    }); 
    // first set display to block, then change opacity 
    // so it fades in 
    test.setStyle('display', 'block').transition({ 
     opacity: 1 
    }); 
    }); 
}); 

는 또한 #theTest의 CSS 스타일에 opacity: 0을 추가했다. http://jsbin.com/odujer/1