jquery animate/mouseover/mouseout不起作用

当我将鼠标悬停在类为'spring'的元素上时，我希望它转换为另一种颜色。我正在使用jQuery做这件事，但我似乎无法得到它的工作。任何人都可以为我阐明这一点吗？下面是我到目前为止小提琴...提前jquery animate/mouseover/mouseout不起作用

jsfiddle

谢谢！

$('.spring').mouseover(function() { 
    $('.spring').animate({ 
     'backgroundColor' : '#CCCCCC' 
    }).mouseout(function() { 
    $('.spring').animate({ 
     'backgroundColor' : '#000000' 
    }); 
});

这是我至今对jQuery的代码！

来源

2014-02-18 user3263978

一边注意小提琴没有包含jQuery ... – koosa

你的jsfiddle有错误，这里是一个更新的（不做你想要的东西）http://jsfiddle.net/3f4RQ/2/ –

我更新小提琴做你想做的事，看我的回答 –

尝试使用hover此：

$('.spring').hover(function() { 
    $('.spring').animate({ 
     'backgroundColor' : '#CCCCCC' 
    }); 
}, function() { 
    $('.spring').animate({ 
     'backgroundColor' : '#000000' 
    }); 
});

来源

2014-02-18 22:50:45

$(document).ready(function() { 
    $('.spring').hover(function() { 
     $('.spring').animate($(this).css({ 
      'background': '#CCCCCC' 
     })); 
    }, function() { 
     $('.spring').animate($(this).css({ 
      'background': '#000000' 
     })); 
    }); 
});

http://jsfiddle.net/3f4RQ/5/

来源

2014-02-18 22:53:18

我已经修改了你的小提琴

http://jsfiddle.net/3f4RQ/3/

$(document).ready(function() { 

    $('.spring').hover(function() { 
     $('.spring').animate({ 
      'backgroundColor': '#CCCCCC' 
     }) 
    }, 

    function() { 
     $('.spring').animate({ 
      'backgroundColor': '#000000' 
     }); 
    }); 
});

如果您仍然需要mouseover和mouseout事件，那么您可以使用下面的代码片段。 $（文件）。就绪（函数（）{

$('.spring').mouseover(function() { 
     $('.spring').animate({ 
      'backgroundColor': '#CCCCCC' 
     }) 
    }) 
.mouseout(
    function() { 
     $('.spring').animate({ 
      'backgroundColor': '#000000' 
     }); 
    }); 
});

此外，您需要jQuery UI的动画backgroundColor属性。

请标记为答案，如果它帮助。

来源

2014-02-18 22:53:31

如果我理解正确，你希望盒子是红色的，直到有人徘徊，然后变成灰色，然后变成黑色，而不是红色。

我更喜欢让CSS尽可能多地完成工作，因为它经常处理得更快，更容易与之合作，特别是对于如此简单的事情。在大多数情况下，CSS动画可以替代jQuery的动画功能。 jQuery只需要设置一个标志，表示该框已被徘徊，然后在此之后就不再需要了。

的jQuery：

我使用更新后的“开启”功能，鼠标悬停，所以你可以很容易地将其关闭在不需要的时候。这基本上是在第一次悬停时在箱子上设置一个班级。

$(document).ready(function() { 

    $('.spring').on('mouseover', function() { 
     $('.spring') 
     .addClass('touched') 
     .off('mouseover'); 
    }); 

});

CSS：

我发现动画是平滑的，并允许使用CSS转换，而不是jQuery的动画更精细的控制。我们将悬停状态设置为灰色，将隐藏的类设置为黑色，并且CSS中的所有内容都正确。

.spring { 
    background: red; 
    width: 100px; 
    height: 30px; 
    transition: background 0.5s ease 
} 
.spring:hover, .spring.touched:hover { 
    background: #ccc; 
} 
.spring.touched { 
    background: #000; 
}

这使您可以轻松控制外观的每个方面，而无需将繁琐的CSS代码添加到jQuery中。

See the Fiddle here

只能有一个问题，在您使用它，检查表CSS动画的支持： http://caniuse.com/css-animation。我通常认为过渡是一个“很好有”的项目，而不是一个必要的，所以我并不担心IE9及以下版本不会看到过渡。他们仍然可以很好地改变颜色，所以没有任何功能丢失。没有在JavaScript中的所有垃圾的好处是值得的。

来源

2014-02-18 23:23:41 nwalton

你提出了一个关于过渡的强制性观点，我理解得很好。我想做转换，并排除IE8开发和下面所有的一起！然而，因为这个网站是针对一个仍在使用IE8的小学，它教孩子们关于季节差异以及他们为什么如此行事的原因。一切都必须在IE8（该死的学校和他们的IE8）PERFECT PERFECT – user3263978

绝对可以理解。这就是为什么我在最后提出警告。它看起来可能有一个可行的[polyfill]（http://stackoverflow.com/questions/6974648/css3-transition-polyfill）过渡，但它也可能是有意义的坚持jQuery。 – nwalton

jquery animate/mouseover/mouseout不起作用

回答

相关问题