Небольшая проблема с анимацией Jquery - PullRequest
Новая
       22

Небольшая проблема с анимацией Jquery

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

Я использую эту функцию анимации Jquery: 

$(document).ready(function() {
    $("#trigger").hover(function() {
        $("#mask").animate({            
    width: 'toggle', left: '+=0'}, 250, 'easeout');
    });
});

Когда пользователь наводит курсор на область диапазона триггера (<span id="trigger">), маска (<div id="mask">) скользит влево.Затем маска возвращается в положение, когда пользователь отодвигает свою мышь от области триггера.

Она отлично работает.

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

Кто-нибудь знает способ предотвратить это?

1 Ответ

3 голосов
/ 02 апреля 2011

Проблема в том, что вы используете 'toggle' и один обработчик.Таким образом, переключение происходит при входе и выходе мыши.Если вы запускаете в триггере div, выход приводит к его переключению в первый раз.

Чтобы исправить это, используйте два обработчика: 

$(document).ready(function() {
    $("#trigger").hover(function() {
        $("#mask").animate({
            width: '0px',
        }, 250, 'easeout');
    },function() {
        $("#mask").animate({
            width: '100px',
        }, 250, 'easeout');
    });
});

Конечно, вы должны иметь ширину вашего#mask.Если это переменная, вы все равно можете обойти это.

...