使连续的图像只出现在最后一个消失后，而悬停

Making consecutive images only appear after the last disappear while hovering

本文关键字：消失 最后一个 悬停 连续 图像      更新时间：2023-09-26

在我的一个小项目中，我有几个按钮，当悬停时显示另一个div中的图像。悬停第一个按钮后，当悬停第二个时，第一个图像仍然存在，两个图像都显示出来。

如果第二个图像只在第一个图像消失后出现，我该怎么办?

JavaScript代码:

$(".button").hover(function () {
    var iN = $(this).attr("id").charAt(6);
    $('#img'+ iN).fadeIn('slow');
},function() {
    var iN = $(this).attr("id").charAt(6);
   $('#img' + iN).fadeOut('slow');
});

我就是这样做的，但在您的用例中可能行不通。(如果没有，请在你的问题中添加更多细节。)

注意，这个例子使用jQuery的"starts with"选择器:^=来重新隐藏所有ID以字母img

开头的元素。

$('img').hide();
$(".button").hover(function () {
    var iN = $(this).attr("id").charAt(6);
    $('#img'+ iN).fadeIn('slow');
},function() {
    $('[id^=img]').fadeOut();
});
div{height:100px;width:200px;border:1px solid orange;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="123456f" class="button">
  <img id="imgf" src="http://placeimg.com/200/100/nature" />
</div>
<div id="kittenc" class="button">
  <img id="imgc" src="http://placeimg.com/200/100/animals" />
</div>

这个解决方案对我来说非常有效。希望能有所帮助:).

$(document).ready(function(){
  $(".button").hover(function(){
    var buttonID = $(this).attr("id");
     $("#image").attr('src', 'images/pic'+ buttonID+".jpg");  
  });
}); 
<script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id = "container">
<button id = "1" class = "button">Button1</button>
<button id = "2" class = "button">Button2</button>
<button id = "3" class = "button">Button3</button>
<button id = "4" class = "button">Button4</button>
</div>
<img id = "image" src="">

在这段代码中我们是:

  • 使用mouseenter和mouseleave事件。
  • 使用toggleClass()控制<img>的opacity。
    • 通过使用index()来确定按钮的位置，同步按钮触发的鼠标事件。
  • 使用.eq()将关联的img与按钮的索引位置匹配。
  • <img> s的衰落过渡效果是由CSS属性opacity和transition完成的，它们被绑定到.on和.off类中。

片段

$('button').on('mouseenter mouseleave', function() {
  var position = $(this).index();
  $('#gallery').find('img').eq(position).toggleClass('on off');
});
body {
  background: #CCC;
}
#gallery {
  margin: 0 auto;
}
fieldset {
  display: inline-block;
}
img.off {
  opacity: 0;
  transition: opacity .5s linear;
}
img.on {
  opacity: 1;
  transition: opacity .5s linear;
}
img:first-of-type {
  margin-left: 17px;
}
button {
  width: 75px;
  line-height: 1.2;
  font-size: 14px;
  padding: 2px 5px;
  border: 3px outset grey;
  color: 0ee;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section id='gallery'>
  <img src='http://placehold.it/75x100/000/fff?text=1' class='off'>
  <img src='http://placehold.it/75x100/00f/eee?text=2' class='off'>
  <img src='http://placehold.it/75x100/0e0/111?text=3' class='off'>
  <img src='http://placehold.it/75x100/f00/fff?text=4' class='off'>
  <img src='http://placehold.it/75x100/fc0/000?text=5' class='off'>
  <img src='http://placehold.it/75x100/fff/000?text=6' class='off'>
</section>
<fieldset>
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
  <button>5</button>
  <button>6</button>
</fieldset>

相关文章：