如何在div中創建img的平滑鼠標移動

Question

我想使我的img.icon_zoom（第4行）僅在鼠標懸停時出現。這張圖片就是我想要獲得的效果。因此，一旦客戶端用鼠標懸停，圖標就會慢慢消失。後面的圖片是一個鏈接，如果點擊鏈接，它將打開一個Dropbox，通過class =「piczoom」鏈接。我該怎麼做？！？！

這是我的實際代碼。前四行有趣的部分：

<div id="tab1"> 
        <div class="usual"> 
         <a class="piczoom" href="_img/prensa/DOC2.jpg"><img alt="" src="./_img/prensa/photo_zoom.jpg" class="photo_zoom" /></a> 
         <img class="icon_zoom" src="_img/prensa/icon.zoom.png" alt="zoom" /> 
        </div> 

        <article> 
         <p class="p_title1"><img src="./_img/prensa/medio.png" alt="" /></p> 
         <img class="under1" src="./_img/prensa/underline.png" alt="" /> 
         <p class="p_text">Revista la Moraleja</p> 
         <br> 
         <br> 
         <p class="p_title2"><img src="./_img/prensa/description.png" alt="" /></p> 
         <img class="under2" src="./_img/prensa/underline.png" alt="" /> 
         <p class="desc_txt" class="p_text">Entrevista realizada por Antonio Corales. Visitaron el estudio mientras se realizaba los preparativos previos a la exposicion de Santander. Esta entrevista fue publicado en las tres primera paginas de la revista. hola 
         </p> 
         <br> 
         <div class="quote_box"> 
          <img class="quote_left" src="./_img/prensa/quote.left.png" alt="" /> 
          <p class="quote">Sus colores y textura te imnotizanaran</p> 
          <img class="quote_right" src="./_img/prensa/quote.right.png" alt="" /> 
         </div> 
        </article> 
       </div> 

它的最終學校項目，所以我非常感激它！

Answer 1

在我發現我的答案與我得到的答案結束。感謝所有......

我創建了一個代碼，所以一旦加載頁面的圖標會消失非常緩慢，如果鼠標懸停後，淡入淡出和FadeOut將開始工作。這是我的任何好奇的人的代碼，謝謝！

<script type="text/javascript"> 
     /*JQ Fancybox for zoom foto*/ 
     $(document).ready(function() { 
      $("a.piczoom").fancybox({ 
       'overlayShow' : false, 
       'transitionIn' : 'elastic', 
       'transitionOut' : 'elastic' 
      }); 

      /*JQ to fade in on load*/ 
      $('.icon_zoom').hide().fadeIn(3000); 

      /*JQ after load to work with hover*/ 
      $('.pic_zoom_box').hover(function() { 
       $('.icon_zoom').fadeIn('slow', function() {}); 
      }, 
      function() { 
       $('.icon_zoom').fadeOut('slow', function() {}); 
      }); 

     }); 
     </script> 

<div class="pic_zoom_box" class="usual"> 
          <a class="piczoom" href="_img/prensa/2_Cutted_zoom/diario_montanes/el_diario_Montanes.jpg"> 
           <img alt="" src="_img/prensa/3_Cutted_preview/diario_montanes/el_diario_montanes.jpg" class="photo_zoom" /> 
           <img class="icon_zoom" src="_img/prensa/icon.zoom.png" alt="zoom" /> 
          </a> 
         </div> 

Answer 2

既然你想流暢的，你可能要預加載您的圖像，所以添加到您的CSS ...

div#preloaded-images { 
    position: absolute; 
    overflow: hidden; 
    left: -9999px; 
    top: -9999px; 
    height: 1px; 
    width: 1px; 
} 

在HTML的底部...

<div id="preloaded-images"> 
    <img src="path/to/my-image.png" width="1" height="1" alt="" /> 
</div> 

然後加入一些jQuery的褪色圖像中...

$('#mydiv').hover(function() { 
    $('#imageId').fadeIn('slow', function() {}); 
}, 
function() { 
    $('#imageId').fadeOut('slow', function() {}); 
});