Improve this jQuery?

I have a jquery noob - using easyslider 1.7 - buttons above the slider - so the effects obfuscate jQuery ... with a simple show / hide right now and work great!

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

I would like the fadeIn / fadeOut buttons to hover over the slider div and remain visible when hovering over the buttons (which float above the slider). Sorry, I 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();
  }
);

      

+2


source to share


1 answer


Use variables to store reusable objects and use 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);

      

+9


source







All Articles