jQuery, наведите курсор на активную только тогда, когда исчезает загрузка страницы - PullRequest
Новая
       310

jQuery, наведите курсор на активную только тогда, когда исчезает загрузка страницы

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

Я довольно новичок в jQuery!

Мне нужно иметь некоторые div для fadeIn при загрузке страницы, и я могу это сделать. Мне нужно, чтобы они показывались с разной задержкой и временем, и я могу это сделать. Каждый div имеет изображение, которое исчезает, когда вы наводите относительный div, и я могу это сделать.

Проблема в том, что анимация изображения при наведении, начнется без остановки, если исчезновение div не закончено.

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

Вот мой HTML 

<div id="immagine1">
<img src="images/logo_key_css.png" alt="logo_key_css" width="169" height="53"/>
</div>
<div id="immagine2">
<img src="images/logo_key_css.png" alt="logo_key_css" width="169" height="53"/>
</div>

Вот мой JQuery 

$(window).load(function () {

$('#immagine1').hide();
$('#immagine1').stop().fadeIn(1000);
$('#immagine2').hide();
$('#immagine2').stop().delay(2500).fadeIn(2500);
$('div').hover(
        function(){ $(this).find('img').fadeIn(1000);
    });

     });

И IMG CSS 

img{
display:none;
}

Как я могу "отключить" эффект наведения до конца исчезновения при загрузке страницы?

Спасибо!

Это тестовая страница

Ответы [ 3 ]

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

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

$('div').hover(function() {
  $(this).queue(function() {
    $(this).find('img').fadeIn(1000);
  });
});​

Эффект затухания начнется после завершения анимации в очереди по умолчанию ("fx"). Вот скрипка , демонстрирующая концепцию; возможно, это укажет вам правильное направление.

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

Я верю, что это сделает то, что вы ищете.По сути, вам нужно подождать, пока <div> полностью не исчезнет, ​​прежде чем связать событие hover для изображения.Вы можете достичь этого, выполнив привязку события в callback для <div> fadeIn.Кроме того, поскольку вы что-то делаете только для события hoverIn (но не для hoverOut), вы можете использовать .mouseenter () вместо .hover ()

Вот код: 

$(function() {
    $('div img').hide();
    $('#immagine1').hide().fadeIn(5000, function() {
        $('div').mouseenter(function() {
            $(this).find('img').fadeIn('1000');
        });
    });
});

И вот рабочая демонстрация: http://jsfiddle.net/vYz3t/

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

Слушай, я не понимаю твоей настоящей проблемы, но попробуй это: 

$(window).load(function () {
    $('#immagine1, #immagine2').hide();
    $('#immagine1').hover(
            function(){
                $(this).fadeIn(1000);
            },
            function(){
                $(this).fadeOut(1000);
            }
    );
    $('#immagine2').hover(
            function(){
                $(this).fadeIn(1000);
            },
            function(){
                $(this).fadeOut(1000);
            }
   );
});

Или посмотрите на jQuery hover docs

...