Question

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

代码：

(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”？

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

我还在opacity: 0的CSS样式中添加了#theTest。

以下是一个有效的例子：http://jsbin.com/odujer/1

YUI为一个div制作动画并在另一个div中淡出

1 个答案: