带有“鼠标方向"的悬停的jQuery动画 [英] jQuery animation for a hover with 'mouse direction'
问题描述
我正在尝试模拟将鼠标悬停在图像上时的效果，叠加的半透明图像将从鼠标的出现方向淡入.反之亦然，当鼠标离开图像时(淡出+移动)
I'm trying to simulate the effect where I hover on an image an overlayed semi-transparent image will fade in from the direction where your mouse came from. Vice versa when your mouse leaves the image (fadeout + moves away)
我为此准备了测试页.继续进行检查，它将阐明所需的效果.
I've prepared a test page for this. Go ahead and check it out, it will clarify what the desired effect is.
我为此定义了一个HTML结构:
I have defined a HTML structure for this:
<div class="overlayLink">
<img src="assets/work/thumbnails/kreatude.jpg" alt="Kreatude" />
<div class="overlayLink_overlay_bg"> </div>
<div class="overlayLink_overlay_fg">
<span class="overlayLink_overlay_link"><a href="#">View Case Study</a></span>
<div class="top"> </div>
<div class="left"> </div>
<div class="right"> </div>
<div class="bottom"> </div>
</div>
</div>
和以下JS(我正在使用jQuery):
and the following JS (I'm using jQuery):
jQuery(document).ready(function () {
ourWork();
});
function ourWork(){
var inHandler = function(){
var blue_bg = jQuery(this).find('.overlayLink_overlay_bg');
var divClass = inClass;
blue_bg.stop(true,true).fadeIn();
var ml,mt;
if(divClass == 'left'){
ml = -260;
mt = 0;
}
else if(divClass == 'right'){
ml = 260;
mt = 0;
}
else if(divClass == 'top'){
ml = 0;
mt = -140;
}
else if(divClass == 'bottom'){
ml = 0;
mt = 140;
}
//positioning
jQuery(this).find('a').css({
'marginLeft': ml + 'px',
'marginTop' : mt + 'px'
});
//animation
jQuery(this).find('a').stop(true,true).animate({
"marginLeft": "0px",
"marginTop": "0px"
}, "slow");
}
var outHandler = function(){
var blue_bg = jQuery(this).find('.overlayLink_overlay_bg');
var divClass = outClass;
blue_bg.stop(true,true).fadeOut();
var ml,mt;
if(divClass == 'left'){
ml = -260;
mt = 0;
}
else if(divClass == 'right'){
ml = 260;
mt = 0;
}
else if(divClass == 'top'){
ml = 0;
mt = -140;
}
else if(divClass == 'bottom'){
ml = 0;
mt = 140;
}
//animation
jQuery(this).find('a').stop(true,true).animate({
"marginLeft": ml + "px",
"marginTop": mt + "px"
}, "slow");
}
var inClass, outClass;
jQuery('.overlayLink_overlay_fg div').hover(function(){
inClass = jQuery(this).attr('class');
},function(){
outClass = jQuery(this).attr('class');
});
jQuery('.overlayLink').mouseenter(inHandler).mouseleave(outHandler);
}
说明:
基本上，当我将鼠标悬停在这4个div的其中一个(.overlayLink_overlay_fg div)上时，我在图像顶部有四个绝对定位的div来知道方向(左，上，下，右) div中的变量(var inClass和var outclass)
Basically I have four absolute positioned divs on top of the image to know the direction (left,top,bottom,right) when I hover on one of those 4 div's (.overlayLink_overlay_fg div) I put the class name of the hovered div in a variable (var inClass and var outclass)
当我将鼠标悬停在覆盖图像区域的div(.overlayLink)上时，我会从inClass或outClass变量中请求方向并执行动画(inHandler，outHandler)
Once I hover over the div who covers the area of the image (.overlayLink) I request the direction from the inClass or outClass variable and perform the animation (inHandler,outHandler)
尽管这一切似乎都能奏效，但是当您快速移动鼠标时有点毛刺，现在我要问是什么问题(导致毛刺)以及如何解决用我当前的代码.
however this all seems to work, it's a little glitchy when you move your mouse really fast, now I'm asking what the problem is (that's causing the glitches) and how it could be fixed with my current code.
预先感谢
推荐答案
也许您应该考虑不要将div用作热点"，而是使用一些Math和Javascript查找鼠标进入和离开div的位置.这避免了重叠/间隙问题.下面的代码基本上将div划分为4个三角形区域.当鼠标移到每个区域时，每个区域都会返回一个数字.该代码需要进行一些微调，并且您必须自行决定在何处绑定和取消绑定事件.但是我认为这可以消除您大多数闪烁的问题.
Perhaps you shoud consider not to use the divs as "hotspots" but use some Math and Javascript to find the point where the mouse enters and leaves a div. This avoids overlapping/gaps problems. The code below basicaly divides a div in 4 triangled zones. Each zone returns a number when the mouse moves over it. The code needs some finetuning, and you have to decide for yourself where to bind and unbind the events. But I think it takes away most of your flickering problems.
$(".overlayLink").bind("mouseenter mouseleave",function(e){
/** the width and height of the current div **/
var w = $(this).width();
var h = $(this).height();
/** calculate the x and y to get an angle to the center of the div from that x and y. **/
/** gets the x value relative to the center of the DIV and "normalize" it **/
var x = (e.pageX - this.offset().left - (w/2)) * ( w > h ? (h/w) : 1 );
var y = (e.pageY - this.offset().top - (h/2)) * ( h > w ? (w/h) : 1 );
/** the angle and the direction from where the mouse came in/went out clockwise (TRBL=0123);**/
/** first calculate the angle of the point,
add 180 deg to get rid of the negative values
divide by 90 to get the quadrant
add 3 and do a modulo by 4 to shift the quadrants to a proper clockwise TRBL (top/right/bottom/left) **/
var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180 ) / 90 ) + 3 ) % 4;
/** do your animations here **/
switch(direction) {
case 0:
/** animations from the TOP **/
break;
case 1:
/** animations from the RIGHT **/
break;
case 2:
/** animations from the BOTTOM **/
break;
case 3:
/** animations from the LEFT **/
break;
}});
当然，获得方向的简短符号应该是:
of course the short notation to get the direction should be:
var direction = Math.round( Math.atan2(y, x) / 1.57079633 + 5 ) % 4
其中1.57 ...是Math.PI/2这对我来说很难解释，因为它跳过了度转换.
where 1.57... is Math.PI / 2 This is much more efiicient bit harder for me to explain since it skips the degrees conversion.
这篇关于带有“鼠标方向"的悬停的jQuery动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
