在div .frame
里面我还有3个div: .middle
, .middle
和.bottom
。
.bottom
和.bottom
display none
,当鼠标位于.bottom
上时,jquery函数为animate
, .bottom
的高度增加, .bottom
和.bottom
显示为.fadeIn()
。
当鼠标超出.bottom
, .bottom
的大小正在减小,而.bottom
和.bottom
将以.fadeOut()
消失。
我的CSS是:
.frame{ border-style: solid; border-width: 1px; width:200px; height:200px; position: absolute; top:50px; left:50px; } .middle{ width:200px; height:200px; position: absolute; top:0px; } .top{ display:none; background-color:red; width:100%; } .bottom{ position:absolute; display:none; bottom:0px; background-color:red; width:100%; }
我的HTML:
top middle bottom
bottom
bottom
bottom
和我的jQuery:
var t, h; $(document).on('mouseenter mouseleave', '.frame', function( e ) { var el = $(this), top = el.children('.top'), bottom = el.children('.bottom'), middle = el.children('.middle'), mEnt = e.type == "mouseenter"; if(t == null){ t = el.offset().top; h = el.height(); } if(mEnt == true){ middle.stop().animate({'top':'20px'}); el.stop().animate({ 'height':h+bottom.height()+20, 'top':t-20 }); top.stop().fadeIn(300); bottom.stop().fadeIn(300); }else{ middle.stop().animate({'top':'0px'}); el.stop().animate({ 'height':200, 'top':t }); top.stop().fadeOut(300); bottom.stop().fadeOut(300); } });
你可以在jsFiddle中看到效果: http : //jsfiddle.net/malamine_kebe/WE25E/
我的问题(你不能在jsFiddle中看到它,但在我的电脑中它看到它)是我进入和离开.frame
真的很快,我的鼠标.bottom
超过.frame
然后.bottom
和.bottom
没有想要fadeIn
,我能看到的只是一片空白
以上就是jQuery教程分享jQuery,问题与.animate()和.fadeIn()相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。
本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址:https://www.ctvol.com/jquerytutorial/524365.html