JQuery анимация и наведение мыши - PullRequest
Новая
       34

JQuery анимация и наведение мыши

1 голос
/ 15 марта 2012

Я пытаюсь заставить строку поиска появляться рядом с изображением, когда вы наводите на него курсор, и исчезать, когда вы наводите курсор на изображение рядом с ним. Я в основном заставил это работать, но это действует действительно затруднительно. Трудно объяснить в письменной форме, как оно ведет себя, но вы можете увидеть, о чем я говорю, здесь: http://thecampusbubble.com/redesign/sandbox/problem.php. Я думаю, что большая часть проблемы возникает, когда вы наводите курсор на одно изображение, а затем быстро переходите к следующий до того, как строка поиска полностью появилась.

Вот мой код: 

<div class='header'>
<div class='pageContainer'>
    <img class='bubbleLogo' src='    ../lib/images/bubbleLogo.png    ' />
    <div class='iconContainer' id='findContainer'>
        <div class='headerIcon findIcon' id='find'></div>
        <div class='searchBar' id='findSearchBar'>
            <div class='innerBox'>Night Life</div>
        </div>
    </div>
    <div class='iconContainer' id='buzzContainer'>
        <div class='headerIcon buzzIcon' id='buzz'></div>
        <div class='searchBar' id='buzzSearchBar'>
            <div class='innerBox'>Night Life</div>
        </div>
    </div>
    <div class='iconContainer' id='feedContainer'>
        <div class='headerIcon feedIcon' id='feed'></div>
        <div class='searchBar' id='feedSearchBar'>
            <div class='innerBox'>Night Life</div>
        </div>
    </div>
</div>

Сценарий: 

$('#find').hover(function(){
    $('#findSearchBar').animate({opacity: 100, width: 290}, 500);
    $('#findContainer').animate({width: 365}, 500);

    $('#buzzSearchBar').animate({opacity: 0, width: 0}, 500);
    $('#buzzContainer').animate({width: 79}, 500);

    $('#feedSearchBar').animate({opacity: 0, width: 0}, 500);
    $('#feedContainer').animate({width: 79}, 500);
});
$('#buzz').hover(function(){
    $('#findSearchBar').animate({opacity: 0, width: 0}, 500);
    $('#findContainer').animate({width: 79}, 500);

    $('#buzzSearchBar').animate({opacity: 100, width: 290}, 500);
    $('#buzzContainer').animate({width: 365}, 500);

    $('#feedSearchBar').animate({opacity: 0, width: 0}, 500);
    $('#feedContainer').animate({width: 79}, 500);
});
$('#feed').hover(function(){
    $('#findSearchBar').animate({opacity: 0, width: 0}, 500);
    $('#findContainer').animate({width: 79}, 500);

    $('#buzzSearchBar').animate({opacity: 0, width: 0}, 500);
    $('#buzzContainer').animate({width: 79}, 500);

    $('#feedSearchBar').animate({opacity: 100, width: 290}, 500);
    $('#feedContainer').animate({width: 365}, 500);
});
$(document).ready(function(){
    $('#buzzSearchBar').animate({ opacity: 0, width: 0 }, 0);
    $('#feedSearchBar').animate({ opacity: 0, width: 0 }, 0);
    $('#buzzContainer').animate({ width: 79 }, 0);
    $('#feedContainer').animate({ width: 79 }, 0);
});

1 Ответ

1 голос
/ 15 марта 2012

Если я понял, в чем проблема, вы можете попробовать использовать queues

Полагаю, вы хотите, чтобы анимация немедленно прекращалась, когда вы наводите курсор на другой элемент.Вы можете сделать это, используя .clearQueue

...