tags:

views:

90

answers:

1

I'm a jquery noob--using easyslider 1.7--buttons are over the slider--so effects muddle the jQuery...using simple show/hide right now and works fine!

I want to improve the following medial code to be a little more eloquent, if possible.

I'd like the buttons to fadeIn/fadeOut on hover of the slider div, and stay visible when hovering over the buttons (which are floating over the slider div). Sorry, can't post HTML.

$('#prevBtn,#nextBtn').hide();
$("#slider").hover(
  function () {
    $('#prevBtn,#nextBtn').show();
  },
  function () {
    $('#prevBtn,#nextBtn').hide();
  }
);
$("#prevBtn").hover(
  function () {
    $('#prevBtn,#nextBtn').show();
  },
  function () {
    $('#prevBtn,#nextBtn').hide();
  }
);
$("#nextBtn").hover(
  function () {
    $('#prevBtn,#nextBtn').show();
  },
  function () {
    $('#prevBtn,#nextBtn').hide();
  }
);
+9  A: 

Make use of variables to store reused objects, and make use of the CSS grouping selector.

var buttons = jQuery('#prevBtn,#nextBtn');
var hide = function () { buttons.hide(); }
var show = function () { buttons.show(); }
jQuery("#slider, #prevBtn, #nextBtn").hover(show, hide);
David Dorward
This is great. Just for kicks: if you change the show/hide to fadeIn/fadeOut, the buttons fadein/out twice on a hover from the button to the slider div--again, no idea how to fix that!
Kevin Brown
Check out the HoverIntent plugin (http://cherne.net/brian/resources/jquery.hoverIntent.html) or use `buttons.stop().fadeIn()` and `buttons.stop().fadeOut()`
fudgey