我认为你差不多做到了,但是你需要一些括号(来分组)和一些反斜杠来防止CoffeeScript误解换行符。尝试这个:
thumb_overlay =>
$('.post-thumb a').hover \
(=> $(this).find('.overlay').fadeIn(150)), \
(=> $(this).find('.overlay').fadeOut(150))
您也可以将其全部压成一行,但是您可能会在几个月后后悔:
thumb_overlay =>
$('.post-thumb a').hover (=> $(this).find('.overlay').fadeIn(150)), (=> $(this).find('.overlay').fadeOut(150))
顺便提一句,去主页,点击“尝试CoffeeScript”,这是一个方便处理小段CoffeeScript的方法;从->
版本开始,可以减少JavaScript噪音,等到得到正确的JavaScript之后再切换到=>
。
我不确定在这种情况下你是否想要使用=>
形式,而不是->
形式:
$('.post-thumb a').hover \
(-> $(this).find('.overlay').fadeIn(150)), \
(-> $(this).find('.overlay').fadeOut(150))
这会给你最初的 JavaScript 代码:
$('.post-thumb a').hover((function() {
return $(this).find('.overlay').fadeIn(150);
}), (function() {
return $(this).find('.overlay').fadeOut(150);
}));
如果你不喜欢反斜杠,你可以这样做:
$('.post-thumb a').hover(
-> $(this).find('.overlay').fadeIn(150)
-> $(this).find('.overlay').fadeOut(150)
)
如果你的函数比较长,你可以给它们命名并跳过很多问题:
fadeIn = -> $(this).find('.overlay').fadeIn(150)
fadeOut = -> $(this).find('.overlay').fadeOut(150)
$('.post-thumb a').hover(fadeIn, fadeOut)
在 JavaScript 和 CoffeeScript 中,我倾向于使用这种方法,我认为这样更易读。