Question

我通常使用jQuery，但是我第一次在Squarespace中构建一个网站，它已经使用了YUI，所以我在去的时候把它拿起来。

我想要一个简单的效果，其中链接在mouseenter上稍微淡化，并在mouseleave上再次变得不透明。

看了一些YUI示例，现在这是我的代码：

 YUI().use('*',function(Y){

 //GET THAT CART UP THERE!
Y.on("domready", function() {

    var over = function(e){
  e.currentTarget.transition({
    duration:0.5,
    opacity:0.5
  });
    };

    var out = function(e){
e.currentTarget.transition({
    duration:0.5,
    opacity:1
  });
    };
Y.all('a').on('mouseenter',over);
Y.all('a').on('mouseleave',out);
});
    });

当页面加载时，我没有任何错误或任何内容，但是当鼠标悬停在链接上时也没有效果。

谢谢！

Answer 1

乍一看，看起来代码的主体应该可以工作。我怀疑发生了什么是YUI转换模块实际上没有加载。尝试将使用（'*'）更改为使用（'过渡'）。

请注意，在使用（''）中，''并不意味着“获取并附加所有可能的YUI模块”。它实际上意味着“将所有YUI模块已存在放在此页面上，并将它们附加到此处。”换句话说，在页面的某个位置，您需要显式加载转换模块。

Answer 2

使用use('*')时，请确保页面上已包含所有必需的文件。我的猜测是事实并非如此。

否则，您可以使用loader来处理文件的加载，这样您就可以获得要使用的模块所需的所有文件和依赖项。

使用loader，它看起来像：

YUI().use('node', 'transition', function(Y){

  //GET THAT CART UP THERE!
  Y.on("domready", function() {

    var over = function(e){
      e.currentTarget.transition({
        duration:0.5,
        opacity:0.5
      });
    };

    var out = function(e){
      e.currentTarget.transition({
        duration:0.5,
        opacity:1
      });
    };

    Y.all('a').on('mouseenter',over);
    Y.all('a').on('mouseleave',out);
  });
});

YUI淡出悬停事件

2 个答案: