Jquery эффект наведения исчезает - PullRequest
Новая
       0

Jquery эффект наведения исчезает

0 голосов
/ 29 апреля 2011

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

HTML 

<div class="viewPort">
<a href="#"><img src="<?php echo bloginfo('template_url'); ?>/images/penguin.jpg" alt="penguin">
<span class="dark"></span><span class="slide"></span></a>
</div>

CSS 

.viewPort{float:left; position:relative; border:8px solid #60B1D0; height:300px; width:300px; overflow:hidden;}
.viewPort a{display:block;}
.viewPort img{ position:relative; top:-20px; left:-20px; height:330px;}
.viewPort span.dark{background:url(images/trans.png) repeat; width:100%; height:100%; position:absolute; top:0; left:0; z-index:10; display:none;}
.viewPort span.slide{top:-130px; left:84px; position:absolute; z-index:100; width:130px; height:130px; background:url(images/badge.png) no-repeat;}

jQuery 

$(".viewPort a").hover(function(){

            $(this).find('img').stop().animate({
                height: '300', left: '0', top: '0', width: '300'
            }, 250);

            $('span.dark').fadeIn(600);
            $('span.slide').stop().animate({
                    top: '80'
                    }, 600);

        }, function(){
            $('span.slide').stop().animate({
                    top: '-130'
                }, 400);
            $('span.dark').stop().fadeOut(400);

            $('.viewPort img').stop().animate({
                height: '330', left: '-20', top: '-20', width: '330'
            }, 250);
        });

Это прекрасно работает;однако, если вы наведите курсор на изображение несколько раз назад, <span class="dark"></span>, похоже, не будет затронут.Я посмотрел на консоль Firebug, и прозрачность меняется при наведении;однако визуально вы не видите, что оно темнеет.Есть идеи, почему это происходит?Он отлично работает на обычных парителях, но если вы немного поиграете с ним, эффект затемнения исчезнет.

http://jsfiddle.net/7zQFf/

Ответы [ 2 ]

1 голос
/ 29 апреля 2011

Попробуйте изменить jQuery на это: 

$(".viewPort a").hover(function(){

        $(this).find('img').stop().animate({
            height: '300', left: '0', top: '0', width: '300'
        }, 250);

        $('span.dark').stop().fadeTo(600, 1); // .stop().fadeTo()
        $('span.slide').stop().animate({
                top: '80'
                }, 600);

    }, function(){
        $('span.slide').stop().animate({
                top: '-130'
            }, 400);
        $('span.dark').stop().fadeTo(400, 0); // .stop().fadeTo()

        $('.viewPort img').stop().animate({
            height: '330', left: '-20', top: '-20', width: '330'
        }, 250);
    });

Работает для меня на JSFiddle: http://jsfiddle.net/bFUSX/ (FF4)

0 голосов
/ 29 апреля 2011

Вы должны передать аргумент jumpToEnd как true (чтобы анимация была завершена быстро), чтобы это работало при вызове stop на темном отрезке.Вот демо:

http://jsfiddle.net/7zQFf/4/

...