4

HTMLドキュメントがあります。次のようになります。

オリジナル

ユーザーが「stackinfo」画像にカーソルを合わせると、次のようになります。

ホバリング

画像の私のコード：

<img src="/Resources/Images/MainMenu/logo.png" name="Logo" width="100" height="30" class="MainMenu" id="Logo" />

srcホバー時に画像のを変更する方法を知っていますが、これをアニメーション化するにはどうすればよいですか？

（jQueryでやりたい）

私がすでに試したこと：

$(document).ready(function(){
       $('img[name="Logo"]').hover(function(event){
         $(this).fadeIn(function(event){
             $(this).attr("src","/Resources/Images/MainMenu/logoHover.png");
         });
       },
       function(event){
         $(this).fadeToggle(function(event){
             $(this).attr("src","/Resources/Images/MainMenu/logo.png");
         });  
       });
});
4

7 に答える 7

4

.srcjQueryを使用して値を直接アニメーション化することはできません。

上下にフェードインできるように、2つの画像を重ねて使用する必要があります。

設定後に画像が読み込まれるのに遅延がないように、両方の画像を事前に読み込むか、事前にキャッシュする必要があります.src。

実例： http： //jsfiddle.net/jfriend00/n52Fr/

$(".container").hover(function() {
    $(this).find(".fadeTop").fadeOut(1000);
}, function() {
    $(this).find(".fadeTop").fadeIn(1000);
});​


<div class="container">
    <img src="http://photos.smugmug.com/photos/344291068_HdnTo-Th.jpg">
    <img class="fadeTop" src="http://photos.smugmug.com/photos/344290962_h6JjS-Th.jpg">
</div>​ 


.container {
    position: relative;
    height: 100px;
    width: 150px;
}

.container img {
    position: absolute;
    top: 0;
    left: 0;
}
于 2012-11-09T19:14:13.340 に答える
3 
function troca_imagem(url) {
    $('#foto_grande').animate({ opacity: 0 }, 500, function () { document.getElementById('foto_grande').src = url; });
    $('#foto_grande').animate({ opacity: 1 }, 500);
}
于 2014-03-07T12:45:02.930 に答える
1

OPが行った編集に基づいて私の答えを編集しました。以下では、cssスプライトを使用し、css3を使用して不透明度をアニメーション化します。これはどのIE9<でも機能しないことに注意してください。

ライブデモ

より詳細な説明

.sprite{
    width:100px;
    height:100px;
    background:url(http://www.somethinghitme.com/Post%20Images/sprite.png);
    display:inline-block;
    position:relative;
}
.sprite span{
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background:url(http://www.somethinghitme.com/Post%20Images/sprite.png);
    background-position: left -100px;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    -moz-transition:    opacity 0.5s;
    -o-transition:      opacity 0.5s;   
}

.sprite:hover span{
 opacity: 1;   
}

</ p>

于 2012-11-09T19:12:41.370 に答える
1

不透明度をゼロにアニメーション化し、コールバックを使用して画像ソースを変更し、画像が読み込まれたときに不透明度をアニメーション化するイベントハンドラーをバインドできます。

$('.sprite').on("mouseover",function(e){
    $(this).animate({
        opacity: 0
    },1000, function(){
        setTimeout(function(){
            $('.sprite').animate({
                opacity: 1
            },1000);
        },50);
        $('.sprite').css("background","url(someurl)");
    });
})

この例を参照してください：http：//jsfiddle.net/nHC9U/

于 2012-11-09T19:15:29.047 に答える
1

src属性を実際にアニメートすることはできませんが、

ある画像から別の画像にフェードインすることが目標である場合は、それらを互いに上に配置し、上の画像の不透明度をアニメーション化します。

http://jsfiddle.net/RPYGv/1/

HTML：

<div class="wrapper">
  <img src="...">
  <img src="..." class="on-hover">
</div>​

CSS：

.wrapper {
  position: relative;
}
.wrapper img{
  position: absolute;
  top:0; left:0;
}
.on-hover{
  opacity: 0;
}​

JS：

$(".wrapper").hover(function(){
  $(".on-hover", this).animate({opacity:1},"slow");
},function(){
  $(".on-hover", this).animate({opacity:0},"slow");
});

</ p>

于 2012-11-09T19:28:28.570 に答える
0

返信ありがとうございますが、うまくいく方法を見つけました！

これはCSSコードです：

#Logo.MainMenu{
    margin-left: 0px;
    margin-right: 6px;
    margin-top: 0px;
    margin-bottom: 0px;
    width: 100px;
    height: 30px;
    background: url(/Resources/Images/MainMenu/logo.png);
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
}

#Logo.MainMenu:hover { 
    background-image: url(/Resources/Images/MainMenu/logoHover.png); 
}

およびHTMLページ：

<div id="Logo" class="MainMenu"> &nbsp; </div>
于 2012-11-09T19:32:22.383 に答える
0

JQueryカラープラグインを使用すると、色をアニメーション化できます。

https://github.com/jquery/jquery-color

したがって、背景が透明なpngを作成し、そのpngを保持しているコンテナの背景をアニメーション化することができます。Webセーフフォントでテキストを作成できる場合は、それもアニメーション化できます...

または、SVGイメージを作成し、svg xmlを直接htmlに埋め込むことができます（古いバージョンのIEは、svgプラグインなしでひどいSVGをサポートしているため、おそらく機能しません）。

jquery.color.jsを使用して、svg fillプロパティを許可するフックを追加し、次のようなホバー関数を作成します。

jQuery.Color.hook('fill');

var animationSpeed = 200;

$('#svgwrapper svg').hover(    
    function(){    
        $(this).animate({backgroundColor:'#000000'}, animationSpeed)
        .find('path').animate({fill:'#ffffff'}, animationSpeed);
    },                         
    function(){
         $(this).animate({backgroundColor:'#ffffff'}, animationSpeed)
        .find('path').animate({fill:'#000000'}, animationSpeed);
    }
);

これがSVGメソッドの実用的なフィドルです。IE9およびFirefox、Opera、Chrome、Safariの現在のバージョンで動作します

http://jsfiddle.net/webchemist/hBHBn/11/

于 2012-11-09T20:45:32.527 に答える