Question

我使用JS在悬停时更改图像，并希望为其添加淡入淡出的动画。我已尝试添加.fadeToggle（），但没有任何工作正常。

＆＃13;

$("document").ready(function(){
  $(".logo_container").mouseenter(function(){
    $("#logo").attr('src',function(index, attr){
      return attr.replace(".png", "-color.png");
    });
  });
  $(".logo_container").mouseleave(function(){
    $("#logo").attr('src',function(index, attr){
      return attr.replace("-color.png",".png");
    });
  }); 
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="logo_container">
  <img src="https://ironhorseclub.wpengine.com/wp-content/uploads/2018/05/logo2-sm.png" alt="Wordpress Install" id="logo" data-height-percentage="100">
</div>

＆＃13;

Answer 1

你可以用CSS做到这一点：

＆＃13;

img:hover {
  opacity: 0.5;
  transition: opacity 0.3s linear;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="logo_container">
  <img src="https://ironhorseclub.wpengine.com/wp-content/uploads/2018/05/logo2-sm.png" alt="Wordpress Install" id="logo" data-height-percentage="100">
</div>

＆＃13;

只需将不透明度值，时间值和/或缓动类型更改为您想要的任何内容。

Answer 2

你可以使用jQuery fadeTo

$( "img" ).hover(function(){ 
$(this).fadeTo( "slow" , 0.5, function() {
// Animation complete.
});
});

Answer 3

我建议仅使用CSS

实现相同目的

＆＃13;

.logo_container {
  height:172px;
  width:403px;
  display:inline-block;
  background-image: url("https://ironhorseclub.wpengine.com/wp-content/uploads/2018/05/logo2-sm.png");
  -webkit-transition: background-image 2s ease-out;
  -moz-transition: background-image 2s ease-out;
  -o-transition: background-image 2s ease-out;
  transition: background-image 2s ease-out;
}
.logo_container:hover {
  background:url("https://ironhorseclub.wpengine.com/wp-content/uploads/2018/05/logo2-sm-color.png") no-repeat center;
}

＆＃13;

<div class="logo_container"></div>

＆＃13;

更改图像src jquery动画

3 个答案: