用coffeescript編寫jquery

如何在coffeescript上編寫此代碼？我無法獲得第二個功能。用coffeescript編寫jquery

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

     }); 

});

來源

2013-03-27 Fede

您發佈的JavaScript嗎？你也可以發佈.coffee嗎？ – Jess 2013-03-27 18:12:52

您是否知道http://js2coffee.org/？ – Vassilis 2013-03-27 18:30:45

$(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的功能，因爲我覺得沒有鏈接它們變得不可讀）

來源

2013-03-27 18:20:04

這樣你就可以把這些函數全局存儲起來 – Eru 2013-03-28 07:11:21

不是全局的，在document.ready函數的作用域內。這不是一個精確的翻譯，我把這些功能拉出來，併爲了清晰起見而命名，但對於目前的樣本來說，它沒有任何區別。 – 2013-03-28 11:40:31

的括號使這個簡單。

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

    -> 
    # function two content 
    doMoreStuff() 
)

來源

2013-03-27 18:20:28

傳統的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本身非常複雜。

所以，這裏用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});

快樂科菲-ING :)

來源

2013-03-27 18:41:40 kiddorails

用coffeescript編寫jquery

回答

相關問題