jQuery实现鼠标经过购物车消失下拉框代码(推举)_

1、jQuery实现鼠标经过购物车消失下拉框代码(推举)_ 这一段时间在学习web前端，最近学了jQuery库,深感其强大，下面通过写购物车的下拉框做法，把自己的理解和大家沟通一下，欢迎各位大神教导指正，废话不多说，开头正题： 购物车html: !- 购物车 start - div class=shopping id=shopping-box a href= id=shoptexti class=iconfont/i 购物车（0）/a !- 购物车下拉框 start- div class=shop id=shop-content 购物车中还没有商品，抓紧选购吧！ /div !- 购物车下拉框 en

2、d- /div !- 购物车 end - 刚开头学习原生js时候的写法： /购物车下拉框 start var shoppingBoxNode = document.getElementById(shopping-box); var shopContentNode = document.getElementById(shop-content); var shoptext = document.getElementById(shoptext); shoppingBoxNode.onmouseenter = function() shoptext.style.background = #fff; s

3、hoptext.style.color = #ff6700; shopContentNode.style.display = block; console.log(over); ; shoppingBoxNode.onmouseleave = function() shoptext.style.background = ; shoptext.style.color = ; shopContentNode.style.display = ; console.log(out); ; /购物车下拉框 end 感觉很麻烦，而且还不好理解，下面用jQuery来写的： /购物车 下拉 var interv

4、al1; $(#shopping-box).mouseenter(function() clearTimeout(interval1); $(this).children().first().css(color:#ff6700,background:#fff); $(this).children().last().stop(true,true).slideDown(); ).mouseleave(function() var self = $(this); interval1 = setTimeout(function() self.children().first().removeAttr(

5、style); ,700); $(this).children().last().delay(200).slideUp(); ); 这个看着就洁净利落的多，相对的削减了代码量，这里面大事用法应用链的写法，而且jQuery的方法的兼容问题基本上在其内被都已经被解决了，这点真是让前端的工作量削减了许多，用原生的时候调兼容调的头都快炸了（大家都懂的。），里面用到了jQuery中的延时delay和停止动画stop来处理（很好用的两个函数），当鼠标移动过快消失的问题 这里面大事的写法当然也可以用下面的方法（on也可以用bind来替换）： /购物车 下拉 var interval1; $(#shopping-box).on( mouseenter:fun