Skip to main content
added 108 characters in body
Source Link
blgt
  • 159
  • 4

Your code is already pretty clean, and makes it easy to see what you're doing. What I can suggest is replacing some of the function calls with jQuery's shortcuts:

  • .mousemove is a shortcut for .bind('mousemove')
  • .offset is (in this case only) a more specific version of .css
  • .hover is a shortcut for both .mouseenter and .mouseleave
  • .show and .hide are shortcuts for .css('display'); additionally they abstract away the handling of the display value (you can transparently change it to something other than block)

and so:

$('div.a')
.mousemove(function(e){ // shortcut for .bind
    $('#follow').offset({ // .offset() is more specific than .css()
       left:  e.pageX + 20,
       top:   e.pageY
    });
})
.hover(function() { // shortcut for both .mouseenter() and .mouseleave()
    $('#follow').show(); // shortcut for display:block
    // using .show() also handles changing display to something other than block, if you ever do that in the future
}, function() {
    $('#follow').hide(); // shortcut for display:none
})

Fiddle: http://jsfiddle.net/ycqx58ka/1/

Your code is already pretty clean, and makes it easy to see what you're doing. What I can suggest is replacing some of the function calls with jQuery's shortcuts:

$('div.a')
.mousemove(function(e){ // shortcut for .bind
    $('#follow').offset({ // .offset() is more specific than .css()
       left:  e.pageX + 20,
       top:   e.pageY
    });
})
.hover(function() { // shortcut for both .mouseenter() and .mouseleave()
    $('#follow').show(); // shortcut for display:block
    // using .show() also handles changing display to something other than block, if you ever do that in the future
}, function() {
    $('#follow').hide(); // shortcut for display:none
})

Fiddle: http://jsfiddle.net/ycqx58ka/1/

Your code is already pretty clean, and makes it easy to see what you're doing. What I can suggest is replacing some of the function calls with jQuery's shortcuts:

  • .mousemove is a shortcut for .bind('mousemove')
  • .offset is (in this case only) a more specific version of .css
  • .hover is a shortcut for both .mouseenter and .mouseleave
  • .show and .hide are shortcuts for .css('display'); additionally they abstract away the handling of the display value (you can transparently change it to something other than block)

and so:

$('div.a')
.mousemove(function(e){
    $('#follow').offset({
       left:  e.pageX + 20,
       top:   e.pageY
    });
})
.hover(function() {
    $('#follow').show();
}, function() {
    $('#follow').hide();
})

Fiddle: http://jsfiddle.net/ycqx58ka/1/

Source Link
blgt
  • 159
  • 4

Your code is already pretty clean, and makes it easy to see what you're doing. What I can suggest is replacing some of the function calls with jQuery's shortcuts:

$('div.a')
.mousemove(function(e){ // shortcut for .bind
    $('#follow').offset({ // .offset() is more specific than .css()
       left:  e.pageX + 20,
       top:   e.pageY
    });
})
.hover(function() { // shortcut for both .mouseenter() and .mouseleave()
    $('#follow').show(); // shortcut for display:block
    // using .show() also handles changing display to something other than block, if you ever do that in the future
}, function() {
    $('#follow').hide(); // shortcut for display:none
})

Fiddle: http://jsfiddle.net/ycqx58ka/1/