jquery – gif开始在悬停时播放并在mouseout时停止？

我wana制作下面的gif最初停止但开始播放时悬停,当mouSEOut它将停止…任何人都可以帮助我？

解决方法

在你的情况下,因为动画并不复杂,我的想法是在页面上放置两个图像(动画而不是动画).并在鼠标上/外显示/隐藏它们.

<div id="img_wrap" class="static">
    <img id="animated" src="animated.gif" alt="">
    <img id="static" src="static.jpg" alt="">
</div>

脚本：

$(function(){
    $('#img_wrap').on( 'mouseenter',function() {
         $(this).toggleClass('animated','static');
    })
})

CSS：

.animated #static,.static #animated {
    display: none;
}
.animated #animated,.static #static {
    display: inline;
}

或者你甚至可以使用普通的CSS做到这一点,如果你不需要IE6的支持,除了< a>之外不会触发任何事情的悬停事件：

CSS：

#img_wrap #static,#img_wrap:hover #animated {
    display: inline;
}
#img_wrap #animated,#img_wrap:hover #static {
    display: none;
}