jQuery中在两个拥有相同mouseover的元素之间移动的问题解决办法
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了jQuery中在两个拥有相同mouseover的元素之间移动的问题解决办法,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含1433字,纯文字阅读大概需要3分钟。
内容图文
jQuery中在两个拥有相同mouseover的元素之间移动的问题$('#d11,#d12').on('mouseover',function(){ $('#d2').animate({opacity:'100'}); });
如代码所示,在d11,d12之间移动,animate会执行照成物体一闪一闪的,怎么解决。详细代码如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>Document</title> <style> #d1{overflow:hidden;} #d1 div{height:50px;width:50px;float:left;} #d11{background:#F11;} #d12{background:#ff2;} #d2{height:50px;width:100px;background:#000;opacity:0;filter:alpha(opacity=0);} </style> <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script></head><body> <div id="d1"> <div id="d11"></div> <div id="d12"></div> </div> <div id="d2"></div> <script> $(document).ready(function(){ $('#d11,#d12').on('mouseover',function(){ $('#d2').animate({opacity:'100'}); }); $('#d11,#d12').on('mouseout',function(){ $('#d2').animate({opacity:'0'}); }); }); </script></body></html>
// 先终断之前的动画$(document).ready(function(){ $('#d11,#d12').on('mouseover',function(){ $('#d2').stop(true).animate({opacity:'100'}); }); $('#d11,#d12').on('mouseout',function(){ $('#d2').stop(true).animate({opacity:'0'}); }); });
方法1:
不需要js,css加一句:
#d1:hover~#d2{opacity:1}
不过得注意下d1宽度……
方法2:
加个新类.opa1{opacity:1}然后用addClass和removeClass做。
animate前先stop掉动画。或者用封装好的.hover()
以上就是jQuery中在两个拥有相同mouseover的元素之间移动的问题解决办法的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的jQuery中在两个拥有相同mouseover的元素之间移动的问题解决办法全部内容,希望文章能够帮你解决jQuery中在两个拥有相同mouseover的元素之间移动的问题解决办法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。