关于jquery的淡入淡出问题

简介:

近期想要做前端淡入淡出,想到使用javascript实现的话比较麻烦,需要计算透明度来实现,于是查看jquery有没有方便的方法,结果发现了jQuery fadeIn()或者fadeOut()来实现,但是使用后发现它所有动作都是存在队列里的,如果你反复切换3次,比如每次1秒,那么这个动作淡入淡出重复3次,耗时6秒,然后试着使用stop()进行停止前面的动作,发现有时候会卡着,于是正确的使用方法如下:

$(".mark_left").mouseover(function (){
        $(".leftBtn").stop().animate({ 'opacity': 1 }, 1000);
    });
    $(".mark_left").mouseleave(function (){
        $(".leftBtn").stop().animate({ 'opacity': 0 }, 1000);
    });


本文转自 水滴的历程 51CTO博客,原文链接:http://blog.51cto.com/12390959/2056997
相关文章
|
12月前
|
JavaScript
jQuery 淡入淡出动画 fadeIn(); fadeOut(); fadeToggle(); fadeTo();
jQuery 淡入淡出动画 fadeIn(); fadeOut(); fadeToggle(); fadeTo();
59 0
jQuery 淡入淡出动画 fadeIn(); fadeOut(); fadeToggle(); fadeTo();
|
2月前
|
JavaScript
jQuery 效果 - 淡入淡出
jQuery 效果 - 淡入淡出
11 0
|
3月前
|
JavaScript
jQuery实现淡入淡出
jQuery实现淡入淡出
|
4月前
|
JavaScript 前端开发
jQuery 第四章(效果,显示隐藏,淡入淡出)
jQuery 第四章(效果,显示隐藏,淡入淡出)
59 0
|
JavaScript 前端开发
【jQuery动画】停止动画、淡入淡出、自定义动画
动画队列中所有动画都是按照顺序执行的,默认只有当前的一个动画执行完毕,才会执行后面的动画。为此,jQuery提供了stop()方法用于停止动画效果。通过此方法,可以让动画队列后面的动画提前执行。
|
JavaScript
jQuery 效果 - 淡入淡出
jQuery 效果 - 淡入淡出
79 0
|
JavaScript
jquery淡入淡出-23
jquery淡入淡出-23
44 0
jquery淡入淡出-23
|
JavaScript 索引
使用 jQuery 中的淡入淡出动画,实现图片的轮播效果,每隔 2 秒钟切换一张图片,共 6 张图片
使用 jQuery 中的淡入淡出动画,实现图片的轮播效果,每隔 2 秒钟切换一张图片,共 6 张图片
370 0
使用 jQuery 中的淡入淡出动画,实现图片的轮播效果,每隔 2 秒钟切换一张图片,共 6 张图片
|
JavaScript 开发者
jQuery 特效_淡入淡出|学习笔记
快速学习 jQuery 特效_淡入淡出
197 0
jQuery 特效_淡入淡出|学习笔记