0

更新：现在通过使用另一种方法解决了我的问题（有关详细信息，请参阅接受的答案）。

标准 wordpress 安装，我在页面底部有 4 个导航“按钮”。每个按钮由 2 个由鼠标进入和鼠标退出事件触发的动画 gif 组成。这个想法是让木偶动物在悬停时弹起，然后当你将鼠标移开时再次弹回（这是为儿童托儿所设计的）......

您可以在这里看到我在有限时间内尝试的内容：

这是我正在使用的代码示例：

<div id="foo">
<a href="mysite.com"

onMouseOver="document.images['tiger'].src='http://mysite.com/early/wp-content/themes/new/images/tigerup.gif'"

onMouseOut="document.images['tiger'].src='http://mysite.com/early/wp-content/themes/new/images/tigerdown.gif'"

onFocus="if(this.blur)this.blur()">
<img src="http://mysite.com/early/wp-content/themes/new/images/tigerdown.gif" name="tiger" border="0"> </a>

虽然它确实有效，但它并不像我想要的那样可靠。有时 mouseover 事件无法触发第一个 gif 动画，因此非常感谢任何改善效果的想法 - 谢谢。

4

1 回答 1

0

感谢 Mark Kramer 的解决方案 -停止加载 gif 动画，鼠标悬停开始激活。 

<script type="text/javascript">
$(document).ready(function()
{
    $("#imgAnimate1").hover(
        function()
        {
            $(this).attr("src", "/images/tigerup.gif");
        },
        function()
        {
            $(this).attr("src", "/images/tigerdown.gif");
        });
});
</script>

然后像这样添加图像：

<img id="imgAnimate1" src="/images/tigerdown.gif" alt="" >
于 2013-07-04T16:15:14.750 回答