3

いくつかのソーシャルロゴのページにフェードイン/アウト効果があります。

それらは正常に機能しているようですが、最初のフェードインは、それらにカーソルを合わせるまで機能しません。

ページが読み込まれたときにフェードイン機能を機能させるにはどうすればよいですか？

<script type='text/javascript'>
    $(document).ready(function()
    {
        $("img.a").hover(function() 
        {
            $(this).stop().animate({"opacity": "1"}, "fast");
        },
        function() 
        {
            $(this).stop().animate({"opacity": "0.5"}, "fast");
        });
    });
</script>

ページ：

www.tranceil.fm

4

3 に答える 3

3

jQuery ソリューションが必要なのはわかっていますが、CSS でできるのになぜそれを使うのでしょうか?

img.class {
   opacity: .5;
   transition: opacity 2s;
   /* Transitions will take care of the smooth effect */
   -moz-transition: opacity 2s; /* Firefox 4 */
   -webkit-transition: opacity 2s; /* Safari and Chrome */
   -o-transition: opacity 2s; /* Opera */
}

img.class:hover {
   opacity: 1;
}

注：rgbaイメージなので使用していません

IE のサポートについては、 CSS3 Pieを使用できます

それでもjQueryに固執したい場合は、あまり得意ではありませんが、ソーシャルアイコンをCSSで定義するだけで、ソーシャルアイコンの初期不透明度を設定できると思います

img.a {
   opacity: .5;
}
于 2012-11-27T15:06:54.143 に答える
1

ドキュメントが読み込まれたら、CSS を設定するだけです。

$(document).ready(function(){
    $("img.a").css({"opacity": "0.5"});
    $("img.a").hover(
        function() {
            $(this).stop().animate({"opacity": "1"}, "fast");
        },
        function() {
            $(this).stop().animate({"opacity": "0.5"}, "fast");
        }
    );
});
于 2012-11-27T15:07:57.760 に答える
1

どうですか

<script type='text/javascript'>
$(document).ready(function(){
    $("img.a").hover(
        function() {
            $(this).stop().animate({"opacity": "1"}, "fast");
        },
        function() {
            $(this).stop().animate({"opacity": "0.5"}, "fast");
        }
    ).css('opacity':'0.5');

});
</script>

CSS でも実行できますが、jQuery はブラウザに対してより安全です。

于 2012-11-27T15:08:47.370 に答える