._   underscore

Description: With ._ the original jQuery context before entering a deferred jQuery chain is returned. This allows compact definition of different invocation chains on the same context.

Tip: If an deferred jQuery chain already returns the original context because of loop-free instant invocation then ._ works anyway.


Examples with original jQuery context

Example #10: fading submenus with user friendly timeouts

Menu navigation is frustrating when the submenu closes immediately on mouseleave, because sometimes the mouse pointer moves few pixels unintended. That's why we want to build in timeouts on mouseenter and mouseleave to show/hide the corresponding submenu.

With jquery-timing this is just two lines:

$('#menu li')
  .mouseenter($).unwait().wait(200).children('ul').fadeIn()
  ._.mouseleave($).unwait().wait(300).children('ul').fadeOut();

Example #13: quick image selection

In this example the user can choose an image by clicking on it. He can change his choice as often as he wants.

The "ready" button will always disable if last image is unselected.

$("#choices").on('click','img')
    .add('.selected').toggleClass('selected')
    .$('#result').attr('disabled',false)
._.on('click','img.selected')
    .$('#result').attr('disabled',true);
Choose your preferred image:
  • Spaghetti Bolognese
  • Spaghetti Carbonara
  • Tortellini
  • Shrimps
  • Cake
  • Sweets
  • Coffee

Example #16: playing pong with divs

In this example we work with two different animation queues.

The horizontal animation for the ball uses the effects queue named 'myFX'. We have to start that queue manually using .dequeue('myFX').

// the horizontal animation options
var horiz = { duration : 2000, easing : 'linear', queue : 'myFX' };

The vertical animation uses the default queue which always starts on its own. It includes all three moving elements at once.

// the vertical animation options
var vertic = { duration : 900, easing : 'linear' };

Because the two queues will be animated with different repeating intervals the ball doesn't always take the same path.

$('.example .ball').repeat()
  .animate({left:350},horiz)
  .animate({left:10},horiz).join('myFX')
  ._.dequeue('myFX');

$('.example span').repeat()
  .animate({top:160},vertic)
  .animate({top:0},vertic).join();