我只是在尝试使用
JQuery.
我有一个图像,当mouSEOver()出现时淡入另一个图像并在mouSEOut()上淡化
它的效果很好,除非你将鼠标一次又一次地移动到链接上,比如5次,图像反复淡入淡出,5次,而你只是坐在那里等待它克服这种疯狂的行为.
为了阻止这种行为,我尝试使用一个标志并仅在它尚未动画时启动动画,但是,猜猜是什么？例如,如果我有4个这样的按钮,并且在每个按钮鼠标悬停上我正在淡化在不同的图像中,该动画将被忽略,因为该标志是假的.
那么有没有办法在执行新动画之前停止所有以前的动画？
我在谈论JQuery中正常的fadeIn()和slideDown()函数
<a href="javascript:void(0);" onMouSEOver="mouSEOverOut(false);" onMouSEOut="mouSEOverOut(true);">Tick</a>
JavaScript的
function mouSEOverOut(t) { if(t) { $('.img1').fadeIn(); $('.img2').fadeOut(); } else { $('.img1').fadeOut(); $('.img2').fadeIn(); } }
解决方法
将.stop()与fadeIn / Out一起使用会导致不透明度陷入局部状态.
一种解决方案是使用.fadeTo()代替,它为不透明度提供绝对目标.
function mouSEOverOut(t) { if(t) { $('.img1').stop().fadeTo(400,1); $('.img2').stop().fadeTo(400,0); } else { $('.img1').stop().fadeTo(400,0); $('.img2').stop().fadeTo(400,1); } }
这是一种较短的写作方式.
function mouSEOverOut(t) { $('.img1').stop().fadeTo(400,t ? 1 : 0); $('.img2').stop().fadeTo(400,t ? 0 : 1); }
或者这可能有效.不过要先测试一下.
function mouSEOverOut(t) { $('.img1').stop().fadeTo(400,t); $('.img2').stop().fadeTo(400,!t); }
编辑：这最后一个似乎工作. true / false转换为1/0.您也可以直接使用.animate().
function mouSEOverOut(t) { $('.img1').stop().animate({opacity: t}); $('.img2').stop().animate({opacity: !t}); }