Question

我是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")'); 
    });           
});

Answer 1

$("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,);
    });           
});

添加.stop（true）基于@AntonBoritskiy的优秀建议。

Answer 2

您无法为css功能设置时间。如果你想动画一些东西你将不得不使用动画或其他内置函数之一，如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/

Answer 3

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

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

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

您可以详细了解该方法here。它将提供更快的转换，甚至更容易维护。

Answer 4

如果你想更快地显示图像，你应该有两个图像，然后在悬停时显示顶部图像：

HTML

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

JS

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

jsFiddle example

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

4 个答案: