CODEWITHSUNDEEP
javascriptmootools
Aessandro
Aessandro

Reputation: 5761

Mootools fadein and out smooth effect

Hi I need the overlay to fade in and out smoothly on mouseenter and on mouseleave. The overlay is set to display none in CSS (as it needs to be like this, it will appear on mouseenter). How can I create a nice fade in effect?

#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');
    }
});

Upvotes: 0

Views: 91

Answers (1)

hobberwickey
hobberwickey

Reputation: 6414

You can't use display: none and mouseenter together. Your best bet to to put the mouseenter/mouseleave events on .img_wrapper instead of the image itself that way the events will actually fire.

Upvotes: 1

Related Questions