JQuery的 - .animate <img>

Question

晨報先生。堆棧溢出。

是否有可能2張圖片之間.animate？比如，將img src &淡入淡出到新的img src？

的Html

<img class="classimg" src="images/example.png" /> 

我僞的jQuery/JavaScript代碼：

On Click 
    Animate .classimg height 50 width 100 opacity 1, 600 
    Animate .classimg height 200 width 450, 400 
    Animate .classimg change img src to url(images/example_with_green.png), 700 

謝謝您的affort - 和良好的12月1日！

Answer 1

正如羅伯特說你可以做的是這樣的：

<script type="text/javascript"> 

     $(function() { 
      // find the div.fade elements and hook the hover event 
      $('div.fade').hover(function() { 
       // on hovering over find the element we want to fade *up* 
       var fade = $('> div', this); 

       // if the element is currently being animated (to fadeOut)... 
       if (fade.is(':animated')) { 
        // ...stop the current animation, and fade it to 1 from current position 
        fade.stop().fadeTo(1000, 1); 
       } else { 
        fade.fadeIn(1000); 
       } 
      }, function() { 
       var fade = $('> div', this); 
       if (fade.is(':animated')) { 
        fade.stop().fadeTo(1000, 0); 
       } else { 
        fade.fadeOut(1000); 
       } 
      }); 
     }); 

    </script> 

和HTML：

<div class="fade"> 
      <img src="logo.png" alt="Who we are" /> 
      <div> 
       <img src="logoalt.png" alt="Who we are" /> 
    </div> 
</div> 

Answer 2

這是不可能的，只是一個單一的HTML元素img。你可以做的是動畫/淡入重疊的圖像。淡入一個，另一個淡出。

jQuery的animate()功能只能三維動畫CSS樣式。要允許彩色動畫，您必須使用jQuery UI效果。但是沒有像兩個圖像源一樣支持開箱即用。

放在同一容器DIV的所有圖像是這樣的：

<div style="position:relative;"> 
    <img src="..." style="position:absolute;" /> 
    <img src="..." style="position:absolute;display:none;" /> 
    <img src="..." style="position:absolute;display:none;" /> 
    <img src="..." style="position:absolute;display:none;" /> 
    <img src="..." style="position:absolute;display:none;" /> 
</div> 

，然後循環，通過這些圖像和動畫，做適當的。

Answer 3

你可以做一個單一背景（包含圖象），以及動畫背景位置。 Here's the demo（和article here，如果你有興趣）。