首页 文章

jQuery-用mouseenter改变不透明度并离开 . 单击隐藏按钮后仍会显示图像

提问于
浏览 次
1

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

我遇到的问题是，即使用户点击“隐藏”，图像也会在鼠标从该按钮移开后淡入 . 我正在使用一个名为isHidden的布尔值，它从声明为false开始，当单击“隐藏”时单击“隐藏”并更改为“真”，单击“显示”时返回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>
jquery image opacity mouseenter mouseleave

2 回答

  • 0

    扩展我的评论 .

    使用当前代码，可以在 ready 上执行 if 语句 . 这意味着 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/

    希望有所帮助 .

    回复于
  • 0

    您可以移动条件语句

    if (isHidden === false)

    在你的mouseenter和mouseleave事件中 .

    并在你的$（“＃show”） . click函数使用这个：

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

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

    回复于

相关问题