jquery div overlay flickers on hover

Question

I'm using the cycle plugin and I'm trying to add an overlay on top of slides that will say "want to see more"

My overlay is working but I'm getting an event propagation issue. I hover and the overlay div just flickers in and out. I can get the overlay to stop flickering when i hover but can't get it to disappear when i hover out. It just stays where it was. Can someone clarify what I'm doing wrong?

Here's the jquery:

var portfolioSlider = $('.portfolio-slider');
var portfolioImage = $('.portfolio-slider img');

portfolioSlider.cycle({ 
    fx: "fade",
    delay:  1000,
    timeout: 10000,
    pager: ".slider-nav div",
    pagerEvent: "click",
    activePagerClass: "activeSlide"
}); 

portfolioSlider.hover(function() {
    $(".overlay").css('cursor','pointer').fadeIn('fast',function() {

    })
}, function() {
    $(".overlay").css('cursor','pointer').fadeOut('fast',function() {

    })
});

Here's the html:

<div class="slider-nav">
        <h2>Our Work</h2>
        <div>
            <!--slider anchors go here-->
        </div>  
    </div><!--close sliders-->
    <a href="#" id="testimonial">View Testimonial</a><!--close testimonial-->
    <div class="portfolio-slider">
        <img src="/images/espn.jpg" width="625" height="355" alt="ESPN 1440 AM" class="testimonial"/>
        <img src="/images/remax.jpg" width="625" height="355" alt="RE/MAX of New Jersey" />         
        <img src="/images/merchant.jpg" width="625" height="355" alt="Merchant Services, Inc." />           
        <img src="/images/ldi.jpg" width="625" height="355" alt="Logistic Dynamices, Inc." />           
        <img src="/images/mountainhound.jpg" width="625" height="355" alt="Mountain Hound" />           
        <img src="/images/techlock.jpg" width="625" height="355" alt="Tech Lock, Inc."  class="testimonial"/>
        <img src="/images/angelo.jpg" width="625" height="355" alt="Angelo HelpDesk"  class="testimonial"/> 
        <img src="/images/globe.jpg" width="625" height="355" alt="Globe Max concept" />
        <img src="/images/sarex.jpg" width="625" height="355" alt="SAREX concept" />
        <img src="/images/computers.jpg"  width="625" height="355" alt="Computers 4 All concept" />
    </div><!--close portfolio-slider-->
    <div class="overlay">
        Overlay
    </div>

here's the css:

/********PORTFOLIO SLIDER***********/
.slider-nav{float:left; width:210px; height: 440px; border-right: 1px solid #ccc; margin-right: 30px;}
.slider-nav div{border-top:1px solid #fff; border-bottom: 1px solid #ccc;}
.slider-nav a{display: block; line-height: 20px; font-size:13px; border-top:1px solid #ccc; border-bottom: 1px solid #fff; text-decoration: none; padding: 5px 10px; color:#a2a2a2; text-shadow: 0px 1px 0px #fff;}
.activeSlide{color:#fff !important; background: #1D5C8F !important; font-weight:normal; text-shadow: 1px 1px 1px #174B74 !important;}
.slider-nav a:hover{background: #e5e5e5;}
.portfolio-slider{float:left; width:625px; height: 355px; overflow: hidden; border: 4px solid #ccc; margin-bottom: 20px;}
.request-quote{float:right; margin: 20px 0px;}
.request-quote a{float:left; display:block; width:130px; text-decoration: none; font-weight:bold; font-size:14px; padding:10px; text-shadow: 2px 2px 2px #333; color:#EDEEF2; background: #1D5C8F; border: 1px solid #fff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; text-align: center;}
.request-quote a:hover{-webkit-box-shadow: 1px 2px 4px 1px #000000; -moz-box-shadow: 1px 2px 2px 1px #000000; box-shadow: 1px 2px 4px 1px #000000; }
#testimonial{position: absolute; top:33px; left:707px; z-index: 99999; background: #f00; width:193px; height: 125px; background: url('/images/testimonial.png') no-repeat; text-indent: -99999px; display: none;}
.overlay{background: url('/images/overlay.png') repeat; width:625px; height:355px; position: absolute; top:34px; left:275px; z-index: 99999; display: none;}

I dont have e.stopPropagation in what I'm submitting here, but I have tried it. I know im on the right track but can't get past this. I don't think .stop().fadeIn() is going to be helpful either. I tried that.

Thanks for your help!

Answer 1

So for anyone who finds this later,

I found a good answer. Jquery Hover Flickering issue

The key to make the fade was adding a wrapper div around the portfolio slider div and the overlay div. Then targeting that first with my jquery.

so i added .overlay-wrapper

<div class="overlay-wrapper">
        <div class="portfolio-slider">
            <img src="/images/espn.jpg" width="625" height="355" alt="ESPN 1440 AM" class="testimonial"/>
            <img src="/images/remax.jpg" width="625" height="355" alt="RE/MAX of New Jersey" />         
            <img src="/images/merchant.jpg" width="625" height="355" alt="Merchant Services, Inc." />           
            <img src="/images/ldi.jpg" width="625" height="355" alt="Logistic Dynamices, Inc." />           
            <img src="/images/mountainhound.jpg" width="625" height="355" alt="Mountain Hound" />           
            <img src="/images/techlock.jpg" width="625" height="355" alt="Tech Lock, Inc."  class="testimonial"/>
            <img src="/images/angelo.jpg" width="625" height="355" alt="Angelo HelpDesk"  class="testimonial"/> 
            <img src="/images/globe.jpg" width="625" height="355" alt="Globe Max concept" />
            <img src="/images/sarex.jpg" width="625" height="355" alt="SAREX concept" />
            <img src="/images/computers.jpg"  width="625" height="355" alt="Computers 4 All concept" />
        </div><!--close portfolio-slider-->
        <div class="overlay">
            <p>Overlay</p>
            <p><a href="#">Click here</a></p>
        </div>  
    </div><!--close overlay-wrapper-->

then i targeted with my jquery and i didn't have to worry about the flicker anymore:

$(".overlay-wrapper").hover(
    function() {
        console.log('hover in');    
        $(".overlay").fadeIn('fast');
    }, 
    function() {
        console.log('hover out');
        $(".overlay").fadeOut('fast');
    }
);

i tried to use .add(".overlay") and it did fade in and out but i still got a flicker.

Answer 2

If it is flickering, it sounds like the overlay is stealing your hover event. Either you would need to place the overlay within '.portfolio-slider' or you need to add the overlay to your the selector you apply the hover callbacks too. Example:

Change this:

portfolioSlider.hover(function() {

To this:

portfolioSlider.add('.overlay').hover(function() {