jQuery 购物车鼠标经过出现下拉框的做法

这一段时间查看了jQuery库,深感其强大，下面通过写购物车的下拉框做法，把自己的理解和大家交流一下，欢迎各位大神指点指正，废话不多说，开始正题：

　　购物车html:

<!-- 购物车 start -->
<div class="shopping"  id="shopping-box">
        <a href="" id="shoptext"><i class="iconfont">&#xe605;</i> 购物车（0）</a>
        <!-- 购物车下拉框 start-->
        <div class="shop" id="shop-content">
                购物车中还没有商品，赶紧选购吧！
        </div>
        <!-- 购物车下拉框 end-->
</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";
    shoptext.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 interval1;
$("#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("style");
    },700);
    $(this).children().last().delay(200).slideUp();
});

　　这个看着就干净利落的多，相对的减少了代码量，这里面事件使用应用链的写法，而且jQuery的方法的兼容问题基本上在其内被都已经被解决了，这点真是让前端的工作量减少了很多，用原生的时候调兼容调的头都快炸了（大家都懂的。。。），里面用到了jQuery中的延时delay和停止动画stop来处理（很好用的两个函数），当鼠标移动过快出现的问题

　　这里面事件的写法当然也可以用下面的方法（on也可以用bind来替换）：

//购物车 下拉
var interval1;
$("#shopping-box").on({
    mouseenter:function(){
    },
    mouseleave:function(){ 
 7     }
});  

　　鼠标经过前：

　　

　　鼠标经过后

　　

　　第一次写博客，还正在学习前端，水平比较菜，写的也比较乱，有点没有突出重点，望大家见谅，欢迎大家批评指正，共同进步！

　　over~