writing jquery with coffeescript

Question

How do I write this on coffeescript? I can't get the second function.

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

        });  

});

You posted javascript right? Can you post your .coffee too?

Jess
– Jess

2013-03-27 18:12:52 +00:00
Commented Mar 27, 2013 at 18:12 — Jess
– Jess, Commented Mar 27, 2013 at 18:12
Are you aware of js2coffee.org?

Vassilis
– Vassilis

2013-03-27 18:30:45 +00:00
Commented Mar 27, 2013 at 18:30 — Vassilis
– Vassilis, Commented Mar 27, 2013 at 18:30

Ben McCormick · Accepted Answer · 2013-03-27 18:20:04Z

4

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

I would do it like this (I like to keep the parens for the jQuery functions because I think the chaining becomes unreadable without them)

answered Mar 27, 2013 at 18:20

Ben McCormick

25.8k12 gold badges56 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Eru Over a year ago

this way you store these functions globaly

Ben McCormick Over a year ago

Not globally, within the document.ready function scope. It's not an exact translation, I pulled the functions out and named them for clarity, but for the current sample it makes no difference.

kiddorails · Accepted Answer · 2013-03-27 18:41:40Z

The traditional coffeescript for your mentioned code will look something like:

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

Here is the link with side-by-side JS view. I do understand that it looks very complicated than the original JS itself.

So, here goes the simplistic coffeescript with parens, this also denotes how second function can be incorporated.

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

Happy coffey-ing :)

Alex Wayne · Accepted Answer · 2013-03-27 18:20:28Z

0

Parens make this simpler.

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

  ->
    # function two content
    doMoreStuff()
)

answered Mar 27, 2013 at 18:20

Alex Wayne

188k52 gold badges328 silver badges363 bronze badges

Collectives™ on Stack Overflow

writing jquery with coffeescript

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related