將圖像懸停與淡出

我試圖用淡入/淡出效果懸停圖像。下面的jQuery運行良好，因爲它懶惰加載懸停圖像。將圖像懸停與淡出

第一個示例顯示了原始圖像在淡入時被替換爲新圖像的白色閃光。第二個示例通過設置背景顯示所需的淡入淡出效果，但不知何故失去淡出效果。

HTML：

<img class="imageHoverLoad lazy" 
    data-original="http://decoymagazine.ca/wp-content/uploads/2012/06/red-300x300.jpg" 
    data-hover="http://images.wolfordshop.com/images/colors/thumbs/5635.jpg" />

的jQuery：

$('.imageHoverLoad').mouseenter(function() { 
    var elem = $(this); 
    elem.attr('src', elem.attr('data-hover')).hide().fadeIn(400); 
}); 

$('.imageHoverLoad').mouseleave(function() { 
    var elem = $(this); 
    elem.attr('src', elem.attr('data-original')).hide().fadeIn(400); 
});

Codepen：

http://codepen.io/anon/pen/KVQavM

來源

2016-01-22 Anthony_Z

什麼，如果這個問題它運作良好？ – DinoMyte

您是否嘗試過使用CSS轉換的第二種方法來控制懸停狀態而不是jQuery？ – sean

@DinoMyte，仔細閱讀問題，問題概括得很好。 – sean

你更換src轉換前，因此沒有時間淡出。你需要指定fadeOut並等待動畫承諾繼續之前解決：

$(function() { 
 
    $("img.lazy").lazyload(); 
 
}); 
 

 
$('.imageHoverLoad').mouseenter(function() { 
 
    var elem = $(this); 
 
    elem.fadeOut(400).promise().done(function() { 
 
    elem.attr('src', elem.attr('data-hover')).fadeIn(400); 
 
    }); 
 
}); 
 

 
$('.imageHoverLoad').mouseleave(function() { 
 
    var elem = $(this); 
 
    elem.fadeOut(400).promise().done(function() { 
 
    elem.attr('src', elem.attr('data-original')).fadeIn(400); 
 
    }); 
 
});

.swap-image { 
 
    width: 300px; 
 
    height: 300px; 
 
    margin-bottom: 100px; 
 
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.js"></script> 
 

 
<div class="swap-image"> 
 
    <img class="imageHoverLoad lazy" data-original="http://decoymagazine.ca/wp-content/uploads/2012/06/red-300x300.jpg" data-hover="http://images.wolfordshop.com/images/colors/thumbs/5635.jpg" /> 
 
</div> 
 

 
<div class="swap-image" style="background: url(http://decoymagazine.ca/wp-content/uploads/2012/06/red-300x300.jpg) no-repeat;"> 
 
    <img class="imageHoverLoad lazy" data-original="http://decoymagazine.ca/wp-content/uploads/2012/06/red-300x300.jpg" data-hover="http://images.wolfordshop.com/images/colors/thumbs/5635.jpg" /> 
 
</div>

來源

2016-01-22 22:57:57

優秀的解決方案。 –

將圖像懸停與淡出

回答

相關問題