jQuery滚动广告 解决子div绝对定位与父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             });