我正在尝试使用JQuery实现淡入淡出效果。目前我有一个攻击它的“hov”类元素,没有javascript,css只会改变它的颜色:hover。使用JQuery。
这个想法是克隆元素,因为它被翻转并直接放在前面,剥离了“hov”类,所以它只是静态的。然后我将其淡出,以便创建过渡效果。
我遇到了麻烦,在我从克隆中剥离“hov”类后,KEEPS表现得好像还在那里。我可以将鼠标悬停在克隆上,即使它不能通过hov进行定位。任何想法/提示?
<a href="#" class="hov rounded-50 action-button">Fade Me Out< /a>
$(".hov").mouseover(function() {
// Clone the current element, remove the "hov" class so it won't trigger same behavior
// finally layer it infront of current element
var $overlay = $(this).clone(true).removeClass("hov").insertAfter($(this));
// Push it to the side just for testing purposes - fade it out
$overlay.css({left:'300px'}).fadeOut({duration:500, ease:'easeOutQuad'});
});
答案 0 :(得分:1)
无需克隆元素,只需淡化原始元素:
$('.hov').mouseenter(function() {
$(this).fadeOut();
});
// Optionally:
$('.hov').mouseleave(function() {
$(this).stop(true, true).show();
});
您还可以使用悬停功能:
$('.hov').hover(function(){
$(this).fadeOut();
},
function(){
$(this).stop(true, true).show();
});
如果您只想让它部分淡化,可以为不透明度属性设置动画:
$('.hov').mouseenter(function() {
$(this).animate({'opacity': 0.5});
});
如果你只想让它脉动,那么恢复正常的不透明度:
$('.hov').mouseenter(function() {
$this = $(this);
$this.animate({'opacity': 0.5}, {
'complete': function(){
$this.animate({'opacity': 1});
}
});
});
最后,如果您愿意放弃对旧浏览器的支持,您可以使用css完成所有操作:
.hov {
-webkit-transition: opacity 0.3s ease-in;
-moz-transition: opacity 0.3s ease-in;
}
.hov:hover {
opacity: 0.5;
}