用coffeescript写jquery

Question

我如何在coffeescript上写这个？我无法获得第二个功能。

$(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函数的parens，因为我认为没有它们的链接变得难以理解）

Answer 2

您提到的代码的传统coffeescript类似于：

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

这是link with side-by-side JS view。我明白它看起来比原来的JS本身复杂。

所以，这里是简单的coffeescript与parens，这也表示如何合并第二个功能。

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()
)