Javascript Jquery-FadeIn()效果在脚本循环中不起作用
当user.mouse插入.container时,我希望链接到fadeIn,当user.mouse插入.container时,我希望链接到fadeOut。到目前为止,这是可行的。我怎样才能减缓过渡?使用5000-10000似乎仍然太快Javascript Jquery-FadeIn()效果在脚本循环中不起作用,javascript,jquery,html,css,Javascript,Jquery,Html,Css,当user.mouse插入.container时,我希望链接到fadeIn,当user.mouse插入.container时,我希望链接到fadeOut。到目前为止,这是可行的。我怎样才能减缓过渡?使用5000-10000似乎仍然太快 $( document ).ready(function() { $('.container').mouseenter(function(){ // When mouse enters the .container, #facial sli
$( document ).ready(function() {
$('.container').mouseenter(function(){
// When mouse enters the .container, #facial slides to center of .container.
$('#facial').animate({right: '25%'})
// After #facial slides to center it delays for 500ms.
.delay(500)
// After #facial delays it expands it's width to 100% of .container.
.animate({right: 0, width: '100%'});
// show the span link at bottom as a H2 with center aligned.
$('span').fadeIn('slow');
});
$('.container').mouseleave(function(){
// Mouse leaves .container, and span fades out slowly.
$('span').css('display','none');
$('span').fadeOut('slow');
// Mouse leaves the .container, #facial shrinks it's width to 50%.
// #facial slides back to right of .container.
$('#facial').animate({right: 0, width: '50%'});
});
});
代码工作正常,但显示速度较慢
$('span').fadeIn(1000);
您的问题(至少在JSFIDLE代码中)是:
尝试将“显示”设置为“块”,将“不透明度”设置为0。
这是许多人遇到的一个造型陷阱,因为在动画期间切换显示的项目在没有设置动画的情况下会突然弹出。我相信这就是你想要的效果:
注意:淡入淡出和淡出功能中的时间单位为毫秒(毫秒)。您应该能够在500毫秒或更短的时间内实现良好的过渡。好的。。。因此,似乎在我发布这篇文章之后,我就把代码弄乱了。我将faceIn()改为“slow”,它修复了循环。有人知道我怎样才能减缓过渡吗?这对我来说似乎太快了,当我尝试切换到5000时,速度仍然太快。试试这个:
display: none;