javascript – 列表中的图像之间的淡入淡出

2023年1月10日 135次阅读

我有一些
javascript设置,以便当我悬停图像时,它会更改为不同的图像.唯一的问题是,它是即时的.如何为此添加过渡以使其平滑,在图像之间淡入淡出？

<div class="social">
    <ul class="sociallinks">
        <li>
            <a href="https://www.linkedin.com/in/lee-jordan">
                <img class="linkedinIcon" src="assets/images/linkedin.png" />
            </a>
        </li>
        <li>
            <a href="https://github.com/loxol">
                <img class="githubIcon" src="assets/images/github.png" />
            </a>
        </li>
    </ul>
</div>

$(document).ready(function() {
    $(".linkedinIcon").hover(function() {
        $(this).attr("src", "assets/images/linkedinhover.png");
    }, function() {
        $(this).attr("src", "assets/images/linkedin.png");
    });
});

最佳答案 您可以通过不同的方式执行此操作,但在替换src时无法淡化相同的图像.您可以使用两个img标签,甚至将悬停图像作为img标签的背景放置,并使用css过渡在悬停时淡出图像.这是一个例子：

$(function() {
    $(".linkedinIcon").hover(function() {
        $(this).css("opacity", 0);
    }, function() {
        $(this).css("opacity", 1);
    });
});
ul.sociallinks {
  list-style: none;
}
ul.sociallinks a {
  width: 300px;
  height: 200px;
  display: block;
}
ul.sociallinks img {
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  transition: opacity 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="social">
  <ul class="sociallinks">
    <li>
      <a href="#" style="background-image: url('http://dummyimage.com/300x200/2e97c7/2e97c7&text=2');">
        <img class="linkedinIcon" src="http://dummyimage.com/300x200/c72cc7/c72cc7&text=1" />
      </a>
    </li>
  </ul>
</div>

甚至可能没有JS,只有css：

ul.sociallinks {
  list-style: none;
}
ul.sociallinks a {
  width: 300px;
  height: 200px;
  display: block;
}
ul.sociallinks img {
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  transition: opacity 1s;
}
ul.sociallinks img:hover {
  opacity: 0;
}
<div class="social">
  <ul class="sociallinks">
    <li>
      <a href="#" style="background-image: url('http://dummyimage.com/300x200/2e97c7/2e97c7&text=2');">
        <img class="linkedinIcon" src="http://dummyimage.com/300x200/c72cc7/c72cc7&text=1" />
      </a>
    </li>
  </ul>
</div>
点赞