jQuery滚动广告 解决子div绝对定位与父div重叠引起的闪烁问题

这两天做了一个滚动广告栏的demo 功能有自动轮播 左右箭头移动 导航点选中图片移动效果 模仿的是新浪体育的广告

最难的问题就是子div绝对定位于父div 鼠标移入子div 系统会判定鼠标移出了父div 所以会触发子div消失的效果 消失完因为鼠标在父div中 所以又触发了子div出现的效果 

这样就会导致子div一直重复消失出现 形成闪烁的效果 在网上没有找到合适的解决问题办法 我通过设定状态和js的setTimeout解决了此问题

效果如图

需要设定两个状态

var arrow = false; //判断是否进入了箭头区域
var isDiv = false;//判断是否进入了父div

附上关键代码

 1 $("#content").mouseenter(function () {

 2                 if ($("#left").is(":animated") || $("#right").is(":animated"))//当箭头处于动画时 不执行鼠标移入事件

 3                 {

 4                     return false;//防止鼠标一直进出导致的动画累计

 5                 }

 6                 if (arrow == true) {//移入div同时移入箭头 这个条件永远不会触发 因为两个区域不会相交

 7                     alert("永远不触发");

 8                     $("#left").fadeIn(moveTime);

 9                     $("#right").fadeIn(moveTime);

10                 }

11                 else {//移入div且不在箭头区域 正常触发

12                     $("#left").fadeIn(moveTime);

13                     $("#right").fadeIn(moveTime);

14                 }

15                 isDiv = true;//鼠标移入div状态

16                 flag = false; //停止轮播

17             });

18             $("#content").mouseleave(function () {

19                 var t = setTimeout(a, 1); //晚一点执行 先执行进入箭头区域的事件 把状态改过来 手动改变事件本身的执行顺序

20                 function a() {

21                     if (arrow == true) {//由于先执行了箭头移入事件 箭头区域就不会消失

22                         $("#left").fadeIn(moveTime);

23                         $("#right").fadeIn(moveTime);

24                     }

25                     else {//移出div且不在箭头区域

26                         $("#left").fadeOut(moveTime);

27                         $("#right").fadeOut(moveTime);

28                     }

29                     isDiv = false;

30                 }

31                 flag = true;

32             });

33 

34             $("#left").mouseover(function () {

35                 arrow = true;

36                 flag = false;

37                 $("#left").css("background-position", "-10px -65px");

38                 $("#left").css("cursor", "pointer");     

39             });

40             $("#left").mouseout(function () {

41                 $("#left").css("background-position", "-10px -5px");

42                 var t = setTimeout(a, 1);//让div的mouseover先执行 以便取到isDiv的值

43                 function a() {

44                     if (isDiv == false) {//移出箭头区域 且不在div中 箭头消失

45                         $("#left").fadeOut(moveTime);

46                         $("#right").fadeOut(moveTime);

47                     }

48                 }

49                 arrow = false;

50                 flag = true;

51             });

52             $("#right").mouseover(function () {

53                 arrow = true

54                 flag = false;

55                 $("#right").css("background-position", "-10px -65px");

56                 $("#right").css("cursor", "pointer");

57             });

58             $("#right").mouseout(function () {

59                 $("#right").css("background-position", "-10px -5px");

60                 var t = setTimeout(a, 1);

61                 function a() {

62                     if (isDiv == false) {

63                         $("#left").fadeOut(moveTime);

64                         $("#right").fadeOut(moveTime);

65                     }

66                 }

67                 arrow = false;

68                 flag = true;

69             });

第一次在博客园写文章 也不知道写的好不好 凡事都有个第一次吗