jquery - 一个CSS3动画样式的源代码

标签 jquery html css animation hover

浏览 Handimania网站 我意识到当鼠标悬停在标题上时,标题会跳动一次。现在我知道这可能是使用 CSS 或 CSS3 完成的样式动画(我说得对吗?)但我不太确定如何查看源代码。

到目前为止,当一个吸引人的静态网页突然出现在我面前时,我可以扫描它的 html 以获得它的 secret 和见解。现在我发现自己无法以同样的方式处理这个动态内容。到目前为止我能说的是,在某处应该有一个名为 hover 的类,它依次从 0% 淡化到 100% 然后又回到 0%,一个透明背景的 cyano 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>

最佳答案

我认为很可能是这段代码:

$('#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 中,显示它是一个 jQuery 动画,而不是 CSS3 动画。

关于jquery - 一个CSS3动画样式的源代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17162032/

相关文章:

javascript - TinyMCE:禁用工具栏焦点

javascript - 使用 iframe 预览

jquery - 如何给变量添加样式?

jquery - 为什么这个动画会使我的 iPad 屏幕变宽?

javascript - 如何避免带有过渡元素的水平滚动条

javascript - jQuery 检查字符串前面是否有其他字母

jquery - 为什么 Flexslider 方向按钮不​​显示?

javascript - 在旋转图像上放置图标/文本

javascript - 导出到 CSV 文件分隔符问题

html - CSS - 背景图像出现在我的机器上,但没有出现在我网站的托管版本上……为什么?