jquery - 用咖啡脚本编写 jquery

Question

我如何在咖啡脚本上写这个？我无法获得第二个功能。

$(document).ready(function() {  
        $('.box_container').hover(function(){   
            var width = $(this).outerWidth() / 2;  
            $(this).find('.left').animate({ right :0  },{queue:false,duration:300});  
            $(this).find('.right').animate({ left :0  },{queue:false,duration:300});  
        }, function(){  

            $(this).find('.left').animate({ right : width},{queue:false,duration:300});  
            $(this).find('.right').animate({ left : width},{queue:false,duration:300});  

        });  

});  

Answer 1

$(document).ready ->
    arg1 = ->   
        width = $(this).outerWidth() / 2
        $(this).find('.left').animate { right :0  },{queue:false,duration:300}  
        $(this).find('.right').animate { left :0  },{queue:false,duration:300} 
    arg2 = ->
        $(this).find('.left').animate { right : width}, {queue:false,duration:300} 
        $(this).find('.right').animate { left : width}, {queue:false,duration:300}  

    $('.box_container').hover arg1, arg2

我会这样做（我喜欢保留 jQuery 函数的括号，因为我认为没有它们链接变得不可读）

Answer 2

您提到的代码的传统咖啡脚本将如下所示：

jQuery ->
  $('.box_container').hover ->
      width = $(@).outerWidth()/2
      $(@).find('.left').animate
        right: 0
       ,
        queue:false
        duration: 3000
      $(@).find('.right').animate
        left: 0
       ,
        queue:false
        duration: 3000

   ,
    ->
      $(@).find('.left').animate
        right: width
       ,
        queue: false
        duration: 3000
      $(@).find('.right').animate
        left: width
       ,
        queue: false
        duration: 3000

这是并排 JS 视图的链接。我确实知道它看起来比原始 JS 本身非常复杂。

所以，这里是带有括号的简单咖啡脚本，这也表示如何合并第二个函数。

jQuery ->
  $('.box_container').hover ->
      width = $(@).outerWidth()/2
      $(@).find('.left').animate({right: 0}, {queue:false, duration: 3000 });
      $(@).find('.right').animate({left: 0}, {queue:false, duration: 3000 });
   ,
    ->
      $(@).find('.left').animate({right: width}, {queue: false, duration: 3000});
      $(@).find('.right').animate({left: width}, {queue: false, duration: 3000});

快乐的咖啡:)

Answer 3

Parens 使这更简单。

$('.box_container').hover(
  ->
    # function one content
    doStuff()

  ->
    # function two content
    doMoreStuff()
)