如何为我的 jquery 鼠标事件添加速度答案

【问题标题】：How do I add a speed to my jquery mouse events如何为我的 jquery 鼠标事件添加速度
【发布时间】：2014-04-29 13:23:04
【问题描述】：

我是 js/jquery 的新手，需要一些帮助。这是我想要的功能，但我想减慢图像之间的过渡。有什么想法可以加快这个活动的速度吗？

$("document").ready(function () {
    $('.image1').mouseenter(function(){
        $(this).css('background-image','url("images/image1.jpg")'); 
    });
    $('.image1').mouseleave(function(){
        $(this).css('background-image','url("images/image2.jpg")'); 
    });           
});

【问题讨论】：

“增加速度”是什么意思？您想延迟更改吗？过渡变化？请尽可能具体。
速度还是延迟？ - 如果延迟，您可以执行something like this，否则您可能需要预加载图像以加快速度
image1和image2的尺寸是多少？如果它们没有与页面的其余部分一起加载（如果它们不在浏览器缓存中），则您的浏览器需要加载它们，如果它们很重，可能会很长
如果没有减慢活动发生的功能，您可以随时使用本机 javascript 超时功能。
感谢所有 cmets！我想放慢过渡速度。目前它会立即发生。

标签： jquery image performance background mouseenter

【解决方案1】：

您不能为 css 函数设置时间。如果你想为某些东西设置动画，你必须使用 animate 或其他内置函数之一，如fadeIn、fadeOut、fadeTo、hide、show、slideDown 等。

例如：

$(document).ready(function(){
    $('.hover').hover(
        function(){
            // On Mouse On
            var background = $(this).attr('data-background');
            if ( !background ) { return; }
            $(this)
                .css('background','url(' + background + ')')
                .children('img')
                .fadeOut('fast');
        },
        function(){
            // On Mouse Off
            $(this)
                .children('img')
                .fadeIn('fast');
        }    
    );
});

更多详情请看：http://jsfiddle.net/mattgoucher/6tpC4/4/

【讨论】：

【解决方案2】：

如果我们只谈论性能而不添加新功能，那么：

-考虑将两个图像合并成一个精灵
-考虑通过:hover伪类切换到仅CSS状态切换，如

.image1 {
    /* normal styles */
}
.image1:hover {
    /* hover styles */
}

您可以阅读有关该方法的更多信息here。它将提供更快的转换，更易于维护。

【讨论】：

【解决方案3】：

如果你想更快地显示图片，你应该有两张图片，然后在悬停时显示最上面的一张：

html

<img class="image1" src="images/image1.jpg"/>
<img id="topImage" class="image1 hide" src="images/image2.jpg"/>

$(".image1").mouseenter(function(){
    $("#topImage").removeClass("hide");
}).mouseleave(function(){
    $("#topImage").addClass("hide");
});

jsFiddle example

【讨论】：

【解决方案4】：

$("document").ready(function () {
    $('.image1').mouseenter(function(){
        $(this)..stop(true).animate({
           'background-image','url("images/image1.jpg")'
        }, 5000,);
    });
    $('.image1').mouseleave(function(){
        $(this)..stop(true).animate({
           'background-image','url("images/image2.jpg")'
        }, 5000,);
    });           
});

根据@AntonBoritskiy 的优秀建议添加了 .stop(true)。

【讨论】：

动画时间这么长，最好在开始新动画时停止动画，例如$(this).stop(true).animate(...。否则用户将设法通过悬停和离开目标来启动多个动画。