Question

I need to animate the div ‘introduction’ to make its height and width zero when clicked on the link ‘click here to begin’, which works. Another div ‘theTest’ needs to fade in at the same event. Unfortunately it is not working.
I am new to YUI and I used this as the source.

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

Code:

(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 :(
    });
})();

How do I modify the code to fade in the div “theTest” ?

Answer 1

My guess is that the issue is with display: none and visibility. But I wouldn’t know how to fix it because my YUI 2 knowledge is limited.

Here how I’d do it in 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
    });
  });
});

I also added opacity: 0 to the CSS style of #theTest.

Here’s a working example: http://jsbin.com/odujer/1