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スタイルにも追加しました#theTest。

実例は次のとおりです：http：//jsbin.com/odujer/1

于 2012-12-21T00:40:40.530 に答える