CSS3 and jquery implement hover effects that follow the mouse's direction

Source: Internet
Author: User
This article mainly introduces the CSS3 and jquery based on the mouse to follow the direction of the hover effect of the relevant information, the need for friends can refer to the following

Today we are going to learn how to create a hover effect that senses the mouse slide direction with CSS3 features and jquery. When the mouse slides in, the mask layer will slide in the direction of the last mouse slide, and when the mouse slides out, the mask layer will follow the mouse, slide out of the direction of the mouse. This is a very interesting effect.
We use an unordered list to organize thumbnails and describe the mask layer:

<ul id= "Da-thumbs" class= "da-thumbs" ><li><a href= "http://dribbble.com/shots/502538- Natalie-justin-cleaning "><p><span>natalie & Justin Cleaning by Justin younger</span></p></a></li><li><!--...--></li><!--...--> </ul>

These list items will float to the left and are relatively positioned because we are absolutely positioned to describe the mask layer:

. da-thumbs Li {float:left;margin:5px;background: #fff;p adding:8px;position:relative;box-shadow:0 1px 3px rgba (0,0,0, 0.1);}. Da-thumbs li a,.da-thumbs li a img {display:block;position:relative;}. Da-thumbs Li a {overflow:hidden;}. Da-thumbs Li a P {position:absolute;background:rgba (75,75,75,0.7); width:100%;height:100%;}

Next we will do this: depending on where the mouse enters, we apply the "from" style to the mask layer, which sets the initial position of the mask layer. Then we'll use the transition and add the final state to the style. So the mask layer slides in. When we leave the element, we apply the "from" style again to the mask layer (though it is now actually sliding out) and remove the previous final state style.

Well, here's the core of this little plugin:

this. $el-On (' Mouseenter.hoverdir, Mouseleave.hoverdir ', function (event) {var $el = $ (this), $hoverElem = $el. Find (' P ' ), direction = Self._getdir ($el, {x:event.pagex, y:event.pagey}), stylecss = Self._getstyle (direction), if (event. Type = = = ' MouseEnter ') {$hoverElem. Hide (). css (Stylecss.from); cleartimeout (self.tmhover); self.tmhover = SetTimeout (f Unction () {$hoverElem. Show (0, function () {var $el = $ (this), if (Self.support) {$el. css (' transition ', SELF.TRANSITIONP ROP);} Self._applyanimation ($el, stylecss.to, self.options.speed);} );}, Self.options.hoverDelay);} else {if (self.support) {$hoverElem. css (' transition ', self.transitionprop);} Cleartimeout (Self.tmhover); Self._applyanimation ($hoverElem, Stylecss.from, self.options.speed);}} );

We mainly bind the ' mouseenter ' and ' MouseLeave ' events to the list items, and through the _getdir function we get the direction in which the mouse slides in or out (the imagined detection area is a rectangle divided into four triangles).

As you'll see, in the second demo, we've added a delay so that when the mouse moves from one corner to another, there's not much animation going on.
I hope you can enjoy this little special effect and feel very useful!

jquery animations will be used if the browser does not support CSS transitions.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.