Перекрытие jquery div мерцает при наведении - PullRequest
Новая
       15

Перекрытие jquery div мерцает при наведении

0 голосов
/ 09 октября 2011

Я использую плагин цикла и пытаюсь добавить наложение поверх слайдов, которое скажет «хочу увидеть больше»

Мое наложение работает, но я получаю распространение событиявопрос.Я нахожусь, и наложение div просто вспыхивает.Я могу заставить наложение перестать мерцать при наведении, но не могу исчезнуть, когда наведусь.Это просто остается там, где это было.Может кто-то уточнить, что я делаю не так?

Вот 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() {

    })
});

Вот 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>

Вот 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;}

У меня нет e.stopPropagation в том, что я отправляю здесь, но я попробовал это.Я знаю, что я на правильном пути, но не могу пройти через это.Я не думаю, что .stop (). FadeIn () тоже будет полезен.Я пробовал это.

Спасибо за вашу помощь!

Ответы [ 2 ]

1 голос
/ 10 октября 2011

Так что для любого, кто найдет это позже,

я нашел хороший ответ. Jquery Hover Мерцающая проблема

Ключом к исчезновению было добавление div-обертки вокруг div-слайдера портфолио и div-оверлея.Затем нацелен на это сначала с помощью jquery.

, поэтому я добавил .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-->

, затем я нацелился на jquery, и мне больше не нужно было беспокоиться о мерцании:1012 * 

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

Я пытался использовать .add (". Overlay"), и он исчезал и исчезал, но у меня все еще мерцало.

0 голосов
/ 09 октября 2011

Если он мигает, звучит так, будто наложение крадет ваше событие при наведении курсора.Либо вам нужно будет поместить оверлей внутри «.portfolio-slider», либо вам нужно добавить оверлей к вашему селектору, чтобы вы также применяли обратные вызовы hover.Пример:

Изменить это: 

portfolioSlider.hover(function() {

На это: 

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