マウスホバーで画像を徐々に変更させるには

質問

画像をデュレーションなしで切り替えるのはattrメソッドでできますが
その動作にさらにデュレーションを追加させるにはどういうメソッドを使用すれば
良いのでしょうか？

javascriptかもしくはjQueryのメソッドにそういったメソッドはありませんでしょうか？
javascriptのsetInterval()とclearInterval()あたりを使えばできるのでしょうか？

animateメソッドでは数値をいじれるプロパティしか変更できないので
画像変更は無理ということで
頭を抱えてます。

回答No.3

ixkaito

クロスフェードのように画像を切り替えたい場合は、切り替え前と後の画像を重ねておき、切り替え後の画像を透明にしておく必要があります。
切り替え後の画像を予めHTMLに入れておくか、スクリプトで生成するかはどちらでも構いません。
その状態で、animateで切り替え後を徐々に opacity: 1; にしていき、切り替え前を徐々に opacity: 0; にしていけばできます。

回答No.2

ORUKA1951

IE9以降および他のモダンブラウザ、スマホなどはCSS3のTransforms,Transitions,Animationsプロパティが使えます。
デュレーションが、動作のスタート、終了の速度を意味するのでしたら、transitionを使うことになるでしょう。
CSS Transitions( http://www.w3.org/TR/css3-transitions/ )

どのようなアニメーションをされたいのですか？

回答No.1

fujillin

ご質問の意味をつかみきれていませんが…

＞画像を徐々に変更させる
通常はアニメーションがまさにこれに当たると思いますが？

＞animateメソッドでは数値をいじれるプロパティしか変更できない
＞ので画像変更は無理ということで
スクリプトで変化させることができるのも、同様の範囲ですが、「画像変更」というのは何を意味しているのでしょうか？
画像そのものを入替えるという意味でしたら可能ですし、それを連続的に変化するように見せるのによく用いられている方法は、切替わる画像を重ねておいて、上にある画像を段々透明にしてゆく（フェードアウト）ことによって、徐々に画像そのものが変わったように見えるというものでしょう。
（クロスフェードという言い方もされているようです）

＞その動作にさらにデュレーションを追加させるには
アニメーションの時間変化の繰返し間隔を変えたいという意味でしょうか？
setIntervalでは繰返し間隔は一定になってしまうので、その間隔を経過とともに変えたいのであればsetTimeoutで繰り返すような方式にすれば可能かと思います。
一方で、処理間隔はほぼ一定でも変化量を変えることによって同じような効果を与えることができますので、どちらかと言えば、このような方法が取られることのほうが多いと思います。
変化量を変えるような換算処理は「イージング」と言われており、検索すればいろいろと見つかると思いますし、jQueryのanimateなどではeasingとしてすでに取り入れられています。

flaxhの例ですがイージングの説明として
http://www.geocities.jp/flashiroha/motion/motion3.html

意味が違っていたら、スルーしてください。