Question

我正在为学校做作业，我们正在尝试学习jQuery的基础知识。要求之一是，当用户将鼠标悬停在“隐藏”按钮上时，图像的不透明度会发生变化，并且当鼠标离开“隐藏”按钮时，不透明度将恢复为正常。当然，单击“隐藏”会使图像消失，而“显示”应使其重新出现。

我遇到的问题是，即使用户单击“隐藏”，在鼠标从该按钮移开后图像也会淡入。我使用的是一个名为isHidden的布尔值，该布尔值首先声明为false，然后单击“隐藏”时变为true，然后单击“显示”时返回false。我也有一些控制台日志，以确保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上执行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/

希望有帮助。

Answer 2

您可以移动条件语句

if (isHidden === false)

在mouseenter和mouseleave事件内部。

然后在您的$（“＃show”）。click函数中使用以下代码：

image.fadeTo("fast",1)而不是image.show()

因此，每次您单击显示按钮时，图像将始终处于不透明度1：

jQuery-使用mouseenter更改不透明度并离开。单击隐藏按钮后，图像仍会出现

2 个答案: