jQuery - изменение непрозрачности с помощью мыши, введите и оставьте.Изображение все еще появляется после нажатия кнопки скрытия

Question

Я делаю задание для школы, где мы пытаемся изучить основы jQuery.Одно из требований заключается в том, что когда пользователь наводит курсор на кнопку «Скрыть», непрозрачность изображения изменяется, а когда мышь покидает кнопку «Скрыть», непрозрачность возвращается к нормальной.Если щелкнуть «скрыть», конечно, изображение исчезнет, ​​а «Показать» должно заставить его появиться снова.

Проблема, с которой я сталкиваюсь, заключается в том, что даже после нажатия пользователем кнопки «Скрыть» изображение исчезнет после нажатия мыши.перешел от этой кнопки.Я использую логическое значение isHidden, которое начинается с того, что оно объявляется как ложное, и становится равным true, когда «Hide» и нажимается, и возвращается в «false», когда «Show».У меня также есть несколько консольных журналов, чтобы убедиться, что переменная isHidden получает ожидаемые значения.

Я просматривал другие посты здесь, пытаясь найти похожие проблемы.Я знаю, что в моей логике должна быть ошибка, или, может быть, я просто неправильно понимаю, как работают эти функции mouseenter и mouseleave.

Я просто ищу кого-то, кто может объяснить, что я делаю здесь неправильнои некоторые лучшие способы решить эту проблему.Я пытался использовать .hover () и перемещаться по оператору if, который проверяет, что такое isHidden, но я получаю те же результаты.Любое руководство высоко ценится.Спасибо!

Вот код, с которым я работаю:

$(document).ready(function() {
  //Image variable for easy use
  var image = $("img");
  var isHidden = false;

  //Hide effect
  $("#hide").click(function() {
    isHidden = true;
    image.hide();
  }); //End hidebutton

  //Show effect
  $("#show").click(function() {
    isHidden = false;
    image.show();
  });

  //Hover effect
  if (isHidden == false) {
    $("#hide").mouseenter(function() {
      image.fadeTo(1000, 0.4);
      console.log("mouseenter isHidden is  " + isHidden);
    });
    $("#hide").mouseleave(function() {
      image.fadeTo(1000, 1);
      console.log("mouseleave isHidden is  " + isHidden);
    });
  }

  //Move effect
  $("#move").click(function() {
    image.animate({
      left: '400px'
    }, "slow");
  }); //End of movebutton

  //Enlarge effect
  $("#enlarge").click(function() {
    image.animate({
      height: '400px',
      width: '400px'
    }); //End of animate
  }); //End of enlargebutton

  $("#circle").click(function() {

  }); //End of circlebutton
}); //End of $document

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<p>jQuery simple assignment. Demonstrate that you can use basic jQuery functions.</p>
<img src="https://cdn.pixabay.com/photo/2013/07/18/10/56/smiley-163510_960_720.jpg" border=0 style="height:200px;width:200px;position:absolute;left: 100px;top: 150px;">
<p></p>
<button id="hide">Hide</button>
<button id="show">Show</button>
<p></p>
<button id="move">Move</button>
<button id="enlarge">Enlarge</button>
<button id="circle">Circle</button>

Answer 1

Вы можете переместить ваш условный оператор

if (isHidden === false)

в ваше событие mouseenter и mouseleave.

И в вашем $ ("# show"). Нажмитеиспользуйте эту функцию:

image.fadeTo("fast",1) вместо image.show()

, чтобы изображение всегда было непрозрачным 1 при каждом нажатии кнопки показа:)

Answer 2

Расширение моего комментария.

С вашим текущим кодом вы выполняете оператор if для ready.Это означает, что обратные вызовы для mouseenter и mouseleave связаны только с этим одним условием.Это работает в первый раз, но как только изображение скрыто, условие изменяется, но обратные вызовы по-прежнему связаны с событиями.

Примите во внимание следующее:

$(function() {
  //Image variable for easy use
  var image = $("img");
  var isHidden = false;

  //Hide effect
  $("#hide").click(function() {
    isHidden = true;
    image.hide();
  }); //End hidebutton

  //Show effect
  $("#show").click(function() {
    isHidden = false;
    if (parseFloat(image.css("opacity")) < 1) {
      image.fadeTo(100, 1);
    } else {
      image.show();
    }
  });

  //Hover effect
  $("#hide").mouseenter(function() {
    if (isHidden == false) {
      image.fadeTo(1000, 0.4);
      console.log("mouseenter isHidden is  " + isHidden);
    }
  });
  $("#hide").mouseleave(function() {
    if (isHidden == false) {
      image.fadeTo(1000, 1);
      console.log("mouseleave isHidden is  " + isHidden);
    }
  });

  //Move effect
  $("#move").click(function() {
    image.animate({
      left: '400px'
    }, "slow");
  }); //End of movebutton

  //Enlarge effect
  $("#enlarge").click(function() {
    image.animate({
      height: '400px',
      width: '400px'
    }); //End of animate
  }); //End of enlargebutton

  $("#circle").click(function() {

  }); //End of circlebutton
}); //End of $document

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<p>jQuery simple assignment. Demonstrate that you can use basic jQuery functions.</p>
<img src="https://cdn.pixabay.com/photo/2013/07/18/10/56/smiley-163510_960_720.jpg" border=0 style="height:200px;width:200px;position:absolute;left: 100px;top: 150px;">
<p></p>
<button id="hide">Hide</button>
<button id="show">Show</button>
<p></p>
<button id="move">Move</button>
<button id="enlarge">Enlarge</button>
<button id="circle">Circle</button>

Также посмотрите на кнопку show.Если нажать кнопку «Скрыть», непрозрачность корректируется.Когда вы нажимаете «Показать», он не отображается, но все еще находится в частично скрытом состоянии.Поэтому мы обновляем это.

Вы также можете посмотреть на .hover().в основном совпадает с mouseenter и mouseleave за исключением того, что все в одном.https://api.jquery.com/hover/

Надеюсь, это поможет.