jnoweb jnoweb - 13 days ago 5
Javascript Question

If an element is already visible how do I stop it from toggling

I have a hover state and onclick state on a page. I also have a toggle on the hover state. If the user has already onclicked an element, how do I stop that element toggling again if the hover event re-occurs?

$("#ex").hover(function() {

$("#prod").toggle(300).delay(1000);
$("#test").toggle(300).delay(1000);
$("#dev").toggle(300).delay(1000);

});

$("#prod").click(function() {
$("#prod").unbind("mouseenter mouseleave");
$("#prod").finish();
$("#prod").show();
});

$("#test").click(function() {
$("#test").unbind("mouseenter mouseleave");
$("#test").finish();
$("#test").show();
});

$("#dev").click(function() {
$("#dev").unbind("mouseenter mouseleave");
$("#dev").finish();
$("#dev").show();
});

Answer

Use the .is(":visible") selector and check if it is visible, if so, don't toggle.

$("#ex").hover(function() {
  if (!$("#prod").is(":visible")) $("#prod").toggle(300).delay(1000);
  if (!$("#test").is(":visible")) $("#test").toggle(300).delay(1000);
  if (!$("#dev").is(":visible")) $("#dev").toggle(300).delay(1000);
});