0

Handimaniaの Web サイトを閲覧していると、マウスをホバーすると、タイトルが 1 回点滅していることに気付きました。これはおそらく CSS または CSS3 で行われたスタイル アニメーションであることがわかりました (正しいでしょうか? )。

これまでのところ、魅力的な静的 Web ページが目の前に現れたとき、そのHTMLをスキャンするだけで、その秘密と洞察を得ることができました。今では、この動的コンテンツに同じようにアプローチすることができないことに気づきました。hoverこれまでのところ、0% から 100% にフェードし、0% に戻る、静的なグレーの画像の上に背景が透明なシアノ PNG タイトルというクラスがどこかにあるはずです。

これは私が行くことができる最も遠いところです

<div id="logo">
<img src="http://www.handimania.com/wp-content/themes/handimania/images/logo.png" alt="Handimania" class="hover"/>
<h1>
<img class="dark" src="http://www.handimania.com/wp-content/themes/handimania/images/logo-dark.png" alt="Handimania"/>
</h1>
<p id="tagline">Guides for Handmade, DIY &amp; Crafts Maniacs</p>
</div>
4

1 に答える 1

0

おそらくこのコードだと思います：

$('#logo .hover').hover(
    function(e) {
        console.log('enter');
        $('#logo .hover').animate({opacity: 1}, "slow");
        $('#logo .dark').animate({opacity: 0}, "slow");
    },
    function(e) {
        console.log('leave')
        $('#logo .dark').animate({opacity: 1}, "slow");
        $('#logo .hover').animate({opacity: 0}, "slow");
    }
);

これは含まれているファイルjquery.custom.js?ver=1.0にあり、CSS3 アニメーションではなく jQuery アニメーションであることを示しています。

于 2013-06-18T06:40:12.107 に答える