Question

我有一个输入按钮，其中包含来自css的图像。当悬停或点击输入按钮时，来自CSS的图像会改变其背景位置。

例如。

input { height: 50px; width: 100px; background-position: 0 0; }
input:hover { background-position: 0 -60px; }
input:active { background-position: 0 -120px; }

如何使用jQuery使转换变得缓慢平滑，而不是自动更改？

Answer 1

查看animate function。

只是一个例子：

$('#myElement')
    .css( {backgroundPosition: "0 0"} )
    .mouseover(function(){
        $(this).stop().animate(
            {backgroundPosition:"(0 -150px)"}, 
            {duration:200})
        })
    .mouseout(function(){
        $(this).stop().animate(
            {backgroundPosition:"(0 0)"}, 
            {duration:200})
        })

编辑：

当然你也必须添加onClick-event。

Answer 2

不是使用CSS，而是根据需要将jQuery的fadeTo()绑定到click / hover事件。

您还可以查看相关函数fadeIn（），fadeOut（）和fadeToggle（）。

$('input').hover( function(){ 
    $(this).fadeTo('slow', 0.75);
},
function(){ 
    $(this).fadeTo('slow', 1.0);
});

http://api.jquery.com/category/effects/fading/

Answer 3

你可以尝试这个插件：http://plugins.jquery.com/project/bgImageTransition

Answer 4

看看这个

http://www.protofunc.com/scripts/jquery/backgroundPosition/

使用jQuery慢慢为fade上的按钮添加动画效果

4 个答案: