Question

嗨我需要叠加在mouseenter和mouseleave上顺利淡入淡出。叠加设置为在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');
    }
});

Answer 1

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

Mootools fadein并且效果平稳

1 个答案: