在鼠標懸停中淡入淡出圖像...？

我有以下html和js。它從一個圖像切換到另一個圖像。但我希望圖像淡入淡出（淡入淡出？是這個詞？）。我進行了搜索，但由於某種原因無法將其他淡入淡出方法調整爲我的搜索。我怎樣才能做到這一點？在鼠標懸停中淡入淡出圖像...？

<li class="item"> 
    <a href="/link.html" class="gallery-item"> 
     <span> 
      <img src="/pic1-1.jpg" data-hover="pic1-2.jpg" width="243" height="243" /> 
     </span> 
    </a> 
</li>

的Javascript下面

$(function() { 
    $('.item img').each(function() { 
     $(this).data('original', this.src) 
    }).mouseenter(function() { 
     $(this) 
      .attr('src', $(this).data('hover')) 
    }).mouseleave(function() { 
     $(this) 
      .attr('src', $(this).data('original')) 
    }) 

})

這裏有一個小提琴：http://jsfiddle.net/9qGtv/52/

謝謝！

來源

2014-01-23 user2747609

所以你不能得到'$（本）.stop（）fadeTo（500 .5）;'工作？或者只是用CSS：http://bavotasan.com/2011/a-simple-fade-with-css3/ – epascarello

你想淡出 - >切換圖像 - >淡入，或你想讓一個圖像淡出另一個同時淡入？ –

可能的重複：http://stackoverflow.com/questions/9745853/how-do-i-make-fade-transition-crossfade – mhu

純CSS

HTML：

<span class="imageContainer"> 
    <img src="/pic1-1.jpg" width="243" height="243" class="staticimage" /> 
    <img src="/pic1-2.jpg" width="243" height="243" class="hoverimage"/> 
</span>

CSS：

.staticimage 
{ 
    position:relative; 
    left:0px; 
    top:0px; 
    transition:1s; 
} 

.hoverimage 
{ 
    position:relative; 
    left:0px; 
    top:0px; 
    display:none; 
    transition:1s; 
} 

.imageContainer:hover .staticimage 
{ 
    display:none; 
    transition:1s; 
} 

.imageContainer:hover .hoverimage 
{ 
    display:inline-block; 
    transition:1s; 
}

來源

2014-01-23 14:36:15

http://jsfiddle.net/SuZQ8/

將您的JavaScript改爲此。如果您希望在沒有暫停的情況下淡入淡出，您將希望在DOM中顯示這兩個圖像，因爲您無法淡化信號源的切換;

$(function() { 
    $('.item img').each(function() { 
     $(this).data('original', this.src); 
    }).mouseenter(function() { 
     $(this).fadeOut(500, function(){ 
      $(this).attr('src', $(this).data('hover')); 
      $(this).fadeIn(500); 
     }); 
    }).mouseleave(function() { 
     $(this).fadeOut(500, function(){ 
      $(this).attr('src', $(this).data('original')); 
      $(this).fadeIn(500); 
     }); 
    }); 
});

來源

2014-01-23 14:36:27 RichieAHB

淡入和淡出可以同時發生嗎？或者第二張圖像能夠在第一張圖像上淡入淡出？ – user2747609

雖然問題已經有4年了，但我想我會添加我的解決方案。根據馬克的答案，這是我的方法：

.gallery-item { 
 
    display: block; 
 
    position: relative; 
 
    width: 243px; 
 
    height: 243px; 
 
} 
 

 
.staticimage, 
 
.hoverimage { 
 
    position: absolute; 
 
    transition: all 0.4s linear; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background-size: cover; 
 
} 
 

 
.hoverimage { 
 
    opacity: 0; 
 
} 
 

 
.gallery-item:hover .hoverimage { 
 
    opacity: 1; 
 
}

<a href="/link.html" class="gallery-item"> 
 
    <div style="background-image: url('https://picsum.photos/250/?random')" class="staticimage"></div> 
 
    <div style="background-image: url('https://picsum.photos/251/?random')" class="hoverimage"></div> 
 
</a>

來源

2018-03-06 17:26:38 Tad

在鼠標懸停中淡入淡出圖像...？

回答

相關問題