Jquery hover не работает как задумано - PullRequest
Новая
       4

Jquery hover не работает как задумано

0 голосов
/ 17 февраля 2012

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

Вот тестовая ссылка - http://www.deanelliott.me/misc/test-port/index.html

Как вы можете видеть, если вы наводите курсор мыши на слайд-шоу, появляется наложение, что хорошо, но когда вы наводите курсор на него и появляется следующий слайд, наложение отображается, когда его не должно быть.

Если у кого-то есть идеи о том, в чем проблема, это было бы здорово!

Спасибо

Редактировать: Вот соответствующий код 

$(function(){
$('#slideshow').hover(
    function(){
            $('.slideimage').fadeOut(100, function(){
                    $('.slideoverlay').fadeIn(100);                                            
            });
    },
    function(){
            $('.slideoverlay').fadeOut(100, function(){
                    $('.slideimage').fadeIn(100);                                           
            });
    }
    );
});

.slideoverlay настроен для отображения: нет с помощью CSS

1 Ответ

0 голосов
/ 17 февраля 2012

По какой-то причине ваш fadeIn() применяется ко всем слайд-оверлеям, но fadeOut() применяется только к текущему видимомуЯ бы попытался сделать так, чтобы fadeIn() и fadeOut влияли только на тот, над которым вы зависли.Примерно так: 

$(function(){
    $('#slideshow .slide').hover(
        function(){
            var $this = $(this);
            $this.find('.slideimage').fadeOut(100, function(){
                $this.find('.slideoverlay').fadeIn(100);                                            
            });
        },
        function(){
            var $this = $(this);
            $this.find('.slideoverlay').fadeOut(100, function(){
                $this.find('.slideimage').fadeIn(100);                                           
            });
        }
    );
});

Возможно, возможно, использовать некоторую оптимизацию, но я думаю, что это должно работать.Хотя не проверял, так что удачи.

Попробуйте, чтобы избавиться от белой вспышки.По сути, мысль в том, что вам не нужно скрывать $('.slideimage'), если вы просто накладываете поверх него оверлей.Все, что вам нужно сделать, это спрятать и показать слайдоверлей. 

$(function(){
    $('#slideshow .slide').hover(
        function(){
            var $this = $(this);
            $this.find('.slideoverlay').fadeIn(100);                                            
        },
        function(){
            var $this = $(this);
            $this.find('.slideoverlay').fadeOut(100);
        }
    );
});
...