Question

I normally use jQuery, but I am building a site in Squarespace for the first time and it already uses YUI so I am picking it up as I go.

I want a simple effect where links fade a bit on mouseenter, and become opaque again on mouseleave.

Looked at some YUI examples, and this is my code now:

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

When the page loads, I get no errors or anything, but also no effect when hovering over links.

Thanks!

Answer 1

At first glance, it looks like the main body of your code should work. I suspect that what’s happening is that the YUI transition module isn’t actually loaded. Try changing the use(‘*’) to a use(‘transition’).

Note that in a use(‘‘), the ‘‘ doesn’t mean “fetch and attach all possible YUI modules.” It actually means, “take all YUI modules already present on this page, and attach them here.” In other words, somewhere on the page, you need to explicitly load the transition module.