怎样安装Dreamweaver的jquery扩展,我们通常会用dreamweaver这个网页设计软件来编写网页前台代码，在编写代码时会经常出现下拉的菜单供我们选择，为我们编写代码节省了很多的时间。这样......
2023-03-17 264 JQUERY DREAMWEAVER
jQuery同时使用mouseover和mouseout造成闪烁
来源：互联网
2023-03-16 23:53:40 391
jQuery很好，好的我都不想说了。但是却有一个小BUG，确切的说这个BUG应该是浏览器事件冒泡所造成的——那就是对于有子元素的父亲同时使用mouseover和mouseout事件并对其进行效果处理（如fadein/out、slideDown/up...等等）。我在之前的文章中也提到过一种方法：那就是把时间绑定到不同的元素上[实际上这种方法的实用性可能不不太好，甚至无法使用]。
今天我就介绍一种非常可行的方法——延迟执行。
方法/步骤
还是老样子，确保你的页面内引入了jQuery。
这里我就直接写代码了。
省略了html结构的其他部分，这里展示的是样式和具体的要执行操作的代码。
1、样式：
style>
.demo { margin:100px auto; width:300px; height:200px; background:#ededed; position:relative;}
.children { background:#00cc99; width:200px; height:150px; position:absolute; right:0; top:0;}
/style>
2、HTML代码：
div class="demo">
div class="children">
/div>
/div>
显示如下
给.children添加一个display:none;效果如下。
现在我们添加脚本：
script>
$(document).ready(function(){
var $div = $(".demo");
$div.mouseover(function(){
$(this).children().slideDown()}).mouseout(function(){
$(this).children().slideUp()})
})
/script>
这段代码使我们一般情况下加的，执行后发现当鼠标放上demo上，children就会显示，但是再将鼠标移入children上，此时children就会来回的显示与隐藏。
现在我们就开始讲怎么解决这个问题。mouseover和mouseout实际上可以用hover代替。然后我们在对执行的动作进行延迟处理。
script>
$(document).ready(function(){
$(".demo").hover(
function(){
var $div = $(".demo");
t = setInterval(function(){
$div.children().slideDown(300)
},300);
},function(){
clearInterval(t);
$(this).children().slideUp();
})
})
/script>
执行之后，发现不会在出现闪烁的情况了，怎么样是不是很简单：只要将划入要执行的操作延迟执行就可以了。
说明：对于show()和hide()这两个函数则不需要用延迟执行的。时间的冒泡对他们没有影响，至少在我的使用中还没发现过有影响的。
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
标签： JQUERY
相关文章
- 详细阅读
-
jQuery MiniUI 快速入门详细阅读
jQuery MiniUI 快速入门,前段时间由于工作的原因接触到MiiUI。感觉MiiUI很强大，使用起来也很舒服。下面我就带领大家快速的使用MiiUI。MiiUI-专业WeUI控件库它能缩短开发时......
2023-03-17 251 JQUERY
-
怎么使用JQuery Mobile开发移动网站详细阅读
怎么使用JQuery Mobile开发移动网站,现在越来越多的人用网站来做手机a,这样的好处是，可以做一个网站，基本上可以做到多个平台adroid,io,w,都可以使用。这里使用JQueryMoile......
2023-03-17 301 JQUERY