JQuery - .animate <img>

Question

モーニング娘。スタックオーバーフロー。

2 imgの間でアニメーションすることは可能ですか？同様に、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エフェクトを使用する必要があります。しかし、2つのイメージソースのようなものは、すぐにサポートされていません。

入れ、このように同じ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）