该网站使用“黑色不透明”滤镜:
/* 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/