gpt4 book ai didi

javascript - 奇怪的 jquery 动画行为

转载 作者:行者123 更新时间:2023-11-28 18:33:26 25 4
gpt4 key购买 nike

该网站使用“黑色不透明”滤镜:

    /* Body black hover */
$(document).ready(function() {
$("#bg_hover").stop();
$("#bg_hover").animate({ opacity: 0.5 }, 1000);
$("body").hover(function() {
$("#bg_hover").stop();
$("#bg_hover").animate({ opacity: 0.5 }, 1000);
}, function( ) {
$("#bg_hover").stop();
$("#bg_hover").animate({ opacity: 0 }, 1000);
});
});

我遇到的问题是,当用户进入“SOBRE NOSALTRES”(点击上方菜单进入页面)时,我想制作一个小动画。

如您所见,它的动画效果“很好”但一点也不,有时如果您转到“PRODUCTES”并返回“SOBRE NOSALTRES”,动画会卡在 98% 宽度处。有点奇怪,为什么会这样?

这是错误的截图: http://webkunst.comeze.com/test/3.png

这是我用来在 NOSALTRES 页面上制作动画的脚本:

    <script>
$(document).ready(function() {
$("#bg_hover").stop();
$("#bg_hover").animate({ width: '80%', opacity: 0.9, left: '10%', right: '10%' }, 800);
$('li#nosaltres').addClass('active')
});
$("body").hover(function() {
$("#bg_hover").stop();
$("#bg_hover").animate({ opacity: 0.9 }, 500);
}, function( ) {
$("#bg_hover").stop();
$("#bg_hover").animate({ opacity: 0 }, 500);
});
</script>

最佳答案

当您将鼠标悬停<body> 中时会出现问题自从您调用 $("#bg_hover").stop();PRODUCTES 页面正在加载时在 $("body").hover(function() {}); 的第一行这将停止所有 动画,包括将宽度减小到80% 的动画.

我可以通过单击 SOBRE NOSALTRES 重现该问题,然后将鼠标快速移入和移出浏览器窗口。

我不会将悬停效果添加到 <body>直到初始大小调整为 80%完成,例如通过添加一个匿名函数在动画完成后调用。

$("#bg_hover").stop().animate({ width: '80%', opacity: 0.9, left: '10%', right: '10%' }, 800, function() {
$('li#nosaltres').addClass('active');

$("body").hover(function() {
$("#bg_hover").stop().animate({ opacity: 0.9 }, 500);
}, function( ) {
$("#bg_hover").stop().animate({ opacity: 0 }, 500);
});
});

关于javascript - 奇怪的 jquery 动画行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13581351/

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