CODEWITHSUNDEEP
jquerycss
siouxfan45
siouxfan45

Reputation: 199

jQuery Hovery Opacity Blinking

I'm trying to create a hover effect which brings the underlying div to the front.

Bringing the underlying div to the front is already solved through z-index. But my opacity change is causing blinking. It SHOULD stay at 0% when the user is hovering over it, then change back to 100% when they move their cursor off of it. Does anybody know what I'm doing wrong?

The underlying div is .under and the div on top is .img

#portfolio_content .img a { }
#portfolio_content .img a:hover { }
#portfolio_content .img {
    display:block;
    float:left;
    height:210px;
    margin:0 35px 35px 0!important;
    overflow:hidden;
    padding:0;
    width:307px
}
#portfolio_content .img img {
    display:block;
    position:absolute!important;
    overflow:hidden;
    z-index:3!important
}
#portfolio_content .img img:hover { z-index:1!important }
#portfolio_content .img .title, #portfolio_content .img .title a {
    font-size:22px;
    margin:100px 0 10px 0;
    float:left!important;
    width:307px;
    text-align:center;
    position:relative!important
}
.desc {
    font-size:13px;
    display:block;
    text-align:center!important;
    margin:0 auto!important;
    width:307px
}
.under {
    z-index:2!important;
    display:inline;
    position:absolute;
    width:307px;
    height:210px;
    background:transparent
}
.under:hover { z-index:4!important }

jQuery

<!-- Hover Opacity -->
<script type="text/javascript">
$(document).ready(function(){
    $("#portfolio_wrap .img img").hover(function(){
        $(this).fadeTo("slow", 0.0); // This should set the opacity to 100% on hover
    },function(){
        $(this).fadeTo("slow", 1.0); // This should set the opacity back to 60% on mouseout
});
});
</script>

Upvotes: 1

Views: 1161

Answers (6)

thecodeassassin
thecodeassassin

Reputation: 836

get rid of the hover styling

http://jsfiddle.net/9aFqz/

Upvotes: 0

Chad
Chad

Reputation: 19609

This happens because when you hover over the div, you are bringing the span to the front; this makes your mouse technically on the span, which is like hovering out of the div. So it fades back in.

Instead of using z-index, you can fade out the image and fade in your overlay. Make sure the images z-index is always greater than that of your overlay (which sounds silly) that way you are hovering the image.

Edit

Another option is catch the hover of the span.img and fade what is appropriate:

$('span.img').hover(
    function(){
        $('img', this).fadeTo('slow', 0); //Fade out the image
        $('span.under', this).fadeTo('slow', 1); //Fade in overlay
    },
    function(){
        $('img', this).fadeTo('slow', 1); //Fade in the image
        $('span.under', this).fadeTo('slow', 0); //Fade out overlay
    }
);

Here is a working jsFiddle of this method.

Upvotes: 1

Zac
Zac

Reputation: 12836

Using !important often causes problems... Here it works fine by just removing this one line:

#portfolio_content .img img:hover { z-index:1!important }

http://jsfiddle.net/sushik/yJj2Q/

Upvotes: 2

Irvin Dominin
Irvin Dominin

Reputation: 30993

You can try to set fading effect in mouseOut and mouseOver event http://api.jquery.com/mouseout/

Something like:

 $(document).ready(function(){
    $("#portfolio_wrap .img img").mouseover(function(){
        $(this).fadeTo("slow", 0.0); // This should set the opacity to 100% on mouseover
    });

    $("#portfolio_wrap .img img").mouseleave(function(){
        $(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on mouseleave
    });
});

Upvotes: 0

Anish Joseph
Anish Joseph

Reputation: 1026

try this

$(document).ready(function(){
    $("#portfolio_wrap .img img").mouseover(function(){
        $(this).fadeTo("slow", 0.0); // This should set the opacity to 100% on mouseover
    });

     $("#portfolio_wrap .img img").mouseleave(function(){
        $(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on mouseleave
    });

});

Upvotes: 0

ptriek
ptriek

Reputation: 9276

Here's the code from the Themeforward example link:

jQuery('#theme-container .post-thumb').hover( function () {
    jQuery(this).find('img').stop().animate({opacity: 0.1}, 300);
    jQuery(this).find('.theme-overlay .link-wrap').stop().animate({opacity: 1}, 300);
}, function () {
    jQuery(this).find('img').stop().animate({opacity: 1}, 300);
    jQuery(this).find('.theme-overlay .link-wrap').stop().animate({opacity: 0}, 300);
});

Hope it helps...

Upvotes: 0

Related Questions