淡入图像，淡出出图像

我有一个标志，当我将鼠标悬停在图像上时，我会淡入，然后淡出，并在我悬停时取代原始图像图片。我几乎可以实现它的工作，但图像双重淡入，并且图像不会淡出。可以在这里完成的任何更改。这是我的html，js和css。运行活生生的例子：淡入图像，淡出出图像

$(".opening").hover(function() { 
 
     $(".opening img").animate({ 
 
     opacity: 1 
 
     }, "slow"); 
 
     $(".opening img").css({ 
 
     "width": 250 
 
     }); 
 
     $(".opening img").attr("src", "http://www.letsgodigital.org/images/producten/3376/pictures/canon-eos-sample-photo.jpg"); 
 
    }, function() { 
 
     $(".opening img").animate({ 
 
     opacity: 0 
 
     }, "slow"); 
 
     $(".opening img").css({ 
 
     "width": 150 
 
     }); 
 
     $(".opening img").attr("src", "http://www.cameraegg.org/wp-content/uploads/2015/06/canon-powershot-g3-x-sample-images-3-620x413.jpg"); 
 
     $(".opening img").animate({ 
 
     opacity: 1 
 
     }, "slow"); 
 
    });

.opening { 
 
    padding: 0 4.2%; 
 
    display: inline; 
 
} 
 
.opening img { 
 
    width: 150px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 

 
<div class="opening"> 
 
    <img src="http://www.cameraegg.org/wp-content/uploads/2015/06/canon-powershot-g3-x-sample-images-3-620x413.jpg" /> 
 
</div>

来源

2016-08-31 Criatura Eterna

你不需要JS这样简单:hover → fade任务。
CSS是很不够

.opening { 
 
    position: relative; /* add this */ 
 
    display: inline-block; /* change */ 
 
} 
 
.opening img { 
 
    width: 150px; 
 
} 
 
.opening img + img{ /* the second image */ 
 
    position:absolute; 
 
    top:0; 
 
    transition: 0.8s; -webkit-transition: 0.8s; 
 
    visibility:hidden; 
 
    opacity:0; 
 
} 
 
.opening:hover img + img{ 
 
    visibility:visible; 
 
    opacity:1; 
 
    width: 250px; 
 
}

<div class="opening"> 
 
    <img src="http://www.cameraegg.org/wp-content/uploads/2015/06/canon-powershot-g3-x-sample-images-3-620x413.jpg" /> 
 
    <img src="http://www.letsgodigital.org/images/producten/3376/pictures/canon-eos-sample-photo.jpg" /> 
 
</div>

另外，如果你使用JS那意味着你的动画将永远垃圾级的第一次因为图像需要从服务器在拉变化src你试图实际制作动画的时候。

来源

2016-08-31 19:33:01

谢谢@ roko-c-buljan，这完成了。我现在正在试图扩大效果而不是衰落，但它是一个很好的开始！ –

@CriaturaEterna在这种情况下：提示：展开父容器（并将其设置为溢出：隐藏;） –

感谢您的提示！ –

为什么不呢？

$(".opening").mouseenter(function(){ 
    $(".opening img").fadeIn("slow", function() { 
     $(this).css({"width":250}).attr("src","http://www.letsgodigital.org/images/producten/3376/pictures/canon-eos-sample-photo.jpg"); 
    }); 
}).mouseleave(function() { 
    $(".opening img").fadeOut("slow", function() { 
     $(this).css({"width":150}).attr("src","http://www.cameraegg.org/wp-content/uploads/2015/06/canon-powershot-g3-x-sample-images-3-620x413.jpg").fadeIn("slow"); 
    }); 
});

来源

2016-08-31 19:26:33

实际上这不起作用，因为当鼠标移出时，第二个图像淡出为隐形。这是我无法完成这项工作的原因之一。谢谢@只有一个 - chemistryblob –

好吧...我现在得到它...让我编辑 –

也fadeIn不工作只是改变图像 –

尝试使用的stop（）停止当前正在运行的动画

来源

2016-08-31 19:30:24 Vero

淡入图像，淡出出图像

回答

相关问题