2

我通常使用 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);
});
    });

当页面加载时，我没有收到任何错误或任何东西，但在将鼠标悬停在链接上时也没有任何效果。

谢谢！

4

2 回答 2

2

乍一看，您的代码主体似乎应该可以工作。我怀疑发生的事情是 YUI 转换模块实际上没有加载。尝试将 use('*') 更改为 use('transition')。

请注意，在 use(' ') 中，' ' 并不意味着“获取并附加所有可能的 YUI 模块”。它实际上的意思是，“把这个页面上已经存在的所有 YUI 模块，并将它们附加到这里。” 换句话说，在页面的某处，您需要显式加载转换模块。

于 2012-11-16T22:47:03.113 回答
2

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

否则，您可以使用 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);
  });
});
于 2012-11-16T22:50:11.713 回答