0

当单击链接“单击此处开始”时，我需要为 div 的“介绍”设置动画，使其高度和宽度为零，这很有效。另一个 div 'theTest' 需要在同一事件中淡入。不幸的是，它不起作用。我是 YUI 的新手，我用它作为来源。

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

如何修改代码以淡入 div "theTest" ？

4

1 回答 1

2

我的猜测是问题在于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
    });
  });
});

我还添加opacity: 0了 .css 的 CSS 样式#theTest。

这是一个工作示例：http: //jsbin.com/odujer/1

于 2012-12-21T00:40:40.530 回答