列表中图像之间的淡入淡出答案

【问题标题】：Fading between images in a list列表中图像之间的淡入淡出
【发布时间】：2016-08-31 14:09:32
【问题描述】：

我设置了一些 javascript，因此当我 hover 一个图像时，它会更改为不同的图像。唯一的问题是，它是即时的。我将如何添加过渡以使其平滑，在图像之间淡入淡出？

<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");
    });
});

【问题讨论】：

How to wait 5 seconds with jQuery?的可能重复
@Tyler 怎么是重复的？
他想为他的图像褪色添加延迟，链接的问题是关于使用 jquery 创建延迟。此外，对该问题的评论谈到接受的答案非常适合延迟（stackoverflow.com/questions/1836105/…）。撇开这一点不谈，一个简单的关于 jquery 延迟的谷歌放弃了许多结果......这个用户不太可能对他的具体问题进行了大量研究。
我认为你应该再读一遍这个问题。或者至少是标题！超时和延迟无济于事。他不想延迟褪色，他想要褪色！在不理解问题时将问题标记为重复不是一个好主意。 @泰勒
@eisbeher 他说“我该如何添加过渡延迟以使其顺利进行？”那是在谈论那里的延误......

标签： javascript jquery html css

【解决方案1】：

您可以通过不同的方式进行操作，但在替换 src 时不能淡化相同的图像。您可以使用两个img 标签，甚至将hover 图像作为img 标签的背景，并在悬停时使用css transitions 淡出图像。这是一个例子：

$(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>

【讨论】：

【解决方案2】：

这是一个简单的 css3 解决方案：

ul.sociallinks a img {
  position: absolute;
  top: 0;
  height: 250px;
}
.animate {
  -webkit-transition: opacity 1s linear;
  -moz-transition: opacity 1s linear;
  transition: opacity 1s linear;
}
.changeDisplayOnHover .showOnHover {
  opacity: 0;
}
.changeDisplayOnHover .hideOnHover {
  opacity: 1;
}
.changeDisplayOnHover:hover .showOnHover {
  opacity: 1;
}
.changeDisplayOnHover:hover .hideOnHover {
  opacity: 0;
}

<div class="social">
  <ul class="sociallinks">
    <li>
      <a href="#" class="changeDisplayOnHover">
        <img class="hideOnHover animate" src="https://66.media.tumblr.com/avatar_8107bb8004a8_128.png" />
        <img class="showOnHover animate" src="http://www.aqua-soft.org/forum/uploads/post-25-1229846653.png" />
      </a>
    </li>
  </ul>
</div>

【讨论】：

【解决方案3】：

2 使用 CSS 的效果：

.changeableImage {
	background:url(http://cdn.quotesgram.com/small/94/89/854123786-colorful-nature-wallpaper.jpg);
	display:block;
	width:300px;
	height:200px;
	transition: padding 2s;
	box-sizing:border-box;
	overflow: hidden;
}


.changeableImage:hover{
	padding-top:200px;
}


.changeableBG {
	background:url(http://cdn.quotesgram.com/small/94/89/854123786-colorful-nature-wallpaper.jpg);
	display:block;
	width:300px;
	height:200px;
	transition: padding 2s;
	box-sizing:border-box;
	overflow: hidden;
}
.changeableBG img{
	display:block;
	width:300px;
	height:200px;
	transition: all 2s;
	box-sizing:border-box;
	overflow: hidden;
  position:relative;
}


.changeableBG img:hover{
	transform: translateY(200px);
}

<div class="social">
  <ul class="sociallinks">
    <li>
      <a href="#">
        <img class="changeableImage" src="http://free4kwallpaper.com/wp-content/uploads/nature/Colorful-UHD-4K-Mountains-Wallpaper-300x200.jpg" />
      </a>
      <br>
      <a class="changeableBG" href="#">
        <img  src="http://free4kwallpaper.com/wp-content/uploads/nature/Colorful-UHD-4K-Mountains-Wallpaper-300x200.jpg" />
      </a>
    </li>
  </ul>
</div>

【讨论】：