Mootools淡入淡出平滑效果

Mootools fadein and out smooth effect

本文关键字：平滑 淡出 淡入 Mootools      更新时间：2023-09-26

嗨，我需要覆盖层在鼠标输入和鼠标离开时平滑地淡入淡出。覆盖设置为在 CSS 中不显示（因为它需要像这样，它将出现在 mouseenter 上）。如何创建漂亮的淡入淡出效果？

#overlay{
width:300px;
height:161px;
background-color: white;
position: absolute;
display: none;
top: -300px;
left: 150px;
}
    var xlImgOverlay = $('overlay');
// overlay for showing larger images
$$('.s_img .img_wrapper img').addEvents({
    mouseenter: function(){
        var xlImg = this.getAttribute('data-xl-img');
        console.log(xlImg);
        var xlImgEl = new Image();
        xlImgEl.src = xlImg;
        xlImgOverlay.grab(xlImgEl, 'top');
        xlImgOverlay.setStyle('display', 'block');
        el.setStyle('opacity', '0.7');
        console.log(xlImgOverlay);
        xlImgOverlay.fade('in', 500);
        },
    mouseleave: function(){
        xlImgOverlay.fade('out', 500);
        xlImgOverlay.empty();
        xlImgOverlay.setStyle('display', 'none');
        el.setStyle('opacity', '1');
    }
});

不能同时使用 display： none 和 mouseenter。最好的办法是将mouseenter/mouseleave事件放在.img_wrapper而不是图像本身上，这样事件就会实际触发。

相关文章：