jquery implementation of the mouse through the shopping cart appears drop-down box code (recommended) _jquery

This period of time in the study of the Web front-end, recently learned the jquery library, deeply its strong, the following by writing a shopping cart under the box practice, their understanding and everyone to exchange, welcome to the great God pointing, nonsense not to say, start the topic:

　Shopping Cart HTML:

<!--shopping cart start-->
<div class= "shopping" id= "Shopping-box" >
<a href= "" id= "Shoptext" ><i class= "Iconfont" ></i> Shopping cart (0) </a>
<!--cart dropdown box start-->
<div class= "Shop" id= " Shop-content ">
shopping Cart There is no product, hurriedly buy it!"
</div>
<!--cart drop-down box end-->
</div>
<!--shopping cart end-->

Just start to learn the original JS when the wording:

Shopping cart drop-down box 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");
Cart drop down box end

It's a lot of trouble, and it's hard to understand, and here's what you write with jquery:

Shopping cart pull down
var interval1;
$ ("#shopping-box"). MouseEnter (function () {
cleartimeout (interval1);
$ (this). Children (). A (). css ({"Color": "#ff6700", "Background": "#fff"});
$ (this). Children (). Last (). Stop (True,true). Slidedown ();
}). MouseLeave (function () {
var self = $ (this);
Interval1 = settimeout (function () {
self.children ().-I (). Removeattr ("style");
},700);
$ (this). Children (), last (). Delay. Slideup ();
});

This looks a lot cleaner, relative to reduce the amount of code, this event uses the writing of the application chain, and the compatibility of the jquery method is basically in the solution has been solved, this is really let the front end of the workload reduced a lot, with the original time to adjust the adjustment of the head is almost blown up (we all know ...) , which uses the time delay delay in jquery and stops the animation stop to handle (very good two functions), when the mouse moves too fast to appear the problem

The writing of this event can of course also be used in the following way (on can also be replaced with BIND):

Shopping cart pull down
var interval1;
$ ("#shopping-box"). On ({
mouseenter:function () {}
,
mouseleave:function () { 
}
});

The above is a small set to introduce the jquery implementation of the mouse through the shopping cart appear drop-down box, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!