CODEWITHSUNDEEP
jquery
Kevin Brown
Kevin Brown

Reputation: 12650

Improve this jQuery?

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

Upvotes: 2

Views: 190

Answers (1)

Quentin
Quentin

Reputation: 943585

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

Upvotes: 8

Related Questions