gpt4 book ai didi

jquery - 有问题的 jQuery 动画代码?

转载 作者:行者123 更新时间:2023-12-01 04:28:15 25 4
gpt4 key购买 nike

我改编了一些用于对文本颜色进行动画处理的代码,以对背景颜色进行动画处理。但现在代码有点问题。在 Chrome 中,第一次悬停时背景会变为白色,并且在所有浏览器中,加载都需要很长时间(如果有影响的话,我将插件存储在服务器上),因此您必须等待几秒钟才能获取影响。这是代码:

$(document).ready(function() {
$(".olli").hover(function() {
$(this).stop().animate({ backgroundColor: "#e8e5e2" }, 500);
},function(){
$(this).stop().animate({ backgroundColor: "#dbd6d0" }, 500);
});
});

.olli 类来自此:

$("#ulnav > li").addClass("olli");

最佳答案

您没有为背景设置初始颜色。要么在 CSS 中将其设置为“关闭”颜色,要么执行以下操作:

$(".olli").hover(function() {
$(this).stop().animate({ backgroundColor: "#e8e5e2" }, 500);
},function(){
$(this).stop().animate({ backgroundColor: "#dbd6d0" }, 500);
}).css({ backgroundColor: "#dbd6d0" });

.olli {
background-color: "#dbd6d0";
}

计算的样式(无论如何在 Chrome 中)是 background-color:transparent ,因此动画需要一个起点,并且 jQueryUI 必须使用 #FFF .

要解决加载缓慢的问题,请删除 <script>来自 <head> 的标签并将它们放在分析代码上方(紧接 #content 部分),并删除 .ready()打电话。

<小时/>

编辑:

在删除 .ready() 时,您可能需要执行此操作称呼。防止创建全局变量(如果有任何变量)。

(function( $ ) {

$(".olli").hover(function() {
$(this).stop().animate({ backgroundColor: "#e8e5e2" }, 500);
},function(){
$(this).stop().animate({ backgroundColor: "#dbd6d0" }, 500);
}).css({ backgroundColor: "#dbd6d0" });

})( jQuery );

关于jquery - 有问题的 jQuery 动画代码?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4774207/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com