[英]jQuery mouseenter tips?
I'm using jQuery to manipulate opacity, and it works pretty good. 我正在使用jQuery处理不透明度,并且效果很好。 However, the perfectionist that I am, it annoys me that the .on('mouseover') function fires only after the past .on('mouseover)-function is finished.
但是,我是完美主义者,我很烦恼.on('mouseover')函数仅在过去的.on('mouseover)函数完成后才触发。
HTML: HTML:
<div class="feature avans">
<div class="feature-media">
<img src="assets/img/avans.png"/>
</div>
<a href="">
<div class="text-wrap">
<p class="big">Avans</p>
<h1>Finding work force — simplified.</h1>
</div>
</a>
</div>
CSS: CSS:
.feature-wrap {
width: 1144px;
margin: 0 auto;
padding: 0;
}
.feature-wrap .feature {
width: 100%;
padding: 0;
overflow: hidden;
position: relative;
background: black;
}
.feature-wrap .feature .feature-media {
width: 100%;
opacity: 0.85;
}
.feature-wrap .feature .feature-media img {
width: 100%;
height: 350px;
margin: 0 0 -5px;
padding: 0;
}
.feature-wrap .feature .text-wrap {
width: 50%;
position: absolute;
top: 0;
padding: 30px 60px 0;
}
jQuery: jQuery的:
$('.feature').on('mouseenter', function () {
$(this).children('.feature-media').animate({opacity: 0.93}, 150);
});
$('.feature').on('mouseleave', function () {
$('.feature-media').animate({opacity: 0.85}, 150);
});
Also, I would love it if someone knew if there's a way to make the function work more like the CSS native hover pseudo-selector (ie the effect only fires while the mouse is in fact hovering the element in question). 另外,如果有人知道是否有办法使该功能更像CSS本机悬停伪选择器(即,该效果仅在鼠标实际上悬停有问题的元素时才触发),我会喜欢上它。
Use .stop()
: 使用
.stop()
:
$('.feature').on('mouseenter', function () {
$(this).children('.feature-media').stop().animate({opacity: 0.93}, 150);
});
$('.feature').on('mouseleave', function () {
$('.feature-media').stop().animate({opacity: 0.85}, 150);
});
This will stop any previous animations or functions, and start the new one. 这将停止所有先前的动画或功能,并开始新的动画或功能。
I love jQuery but my best tip here is to use css3 transitions... They are much more efficient and prevent asynchronous JavaScript code. 我喜欢jQuery,但这里最好的提示是使用css3转换...它们效率更高,并且可以防止异步JavaScript代码。
.feature{
-webkit-transition:0.15s linear;
-moz-transition:0.15s linear;
-ms-transition:0.15s linear;
-o-transition:0.15s linear;
transition:0.15s linear;
filter: alpha(opacity=93);
opacity:0.93;
}
.feature:hover{
filter: alpha(opacity=85);
opacity:0.85;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.