jQuery animate (продолжает анимацию) - PullRequest
Новая
       2

jQuery animate (продолжает анимацию)

0 голосов
/ 11 января 2011

Я пытаюсь сделать довольно простой набор анимаций jQuery с помощью следующего кода:

Дело в том, что все работает не так, как я планировал, когда вы наводите курсор мыши на меню, нижняя часть меню должна сместиться вниз, а меню расширяется, а при наведении курсора происходит обратное!

Сайт - http://www.twostepmedia.co.uk/intasound/services.php для сохранения всего HTML 

$('.tabs li a').animate({
    height: '40'
}, 1000, function () {
    // Animation complete.
});

$('#tabs-wrap').animate({
    marginTop: '-=147'
}, 1000, function () {
    // Animation complete.
});

$(".tabs").hover(function () {
    $('#tabs-wrap').animate({
        marginTop: '+=147'
    }, 500, function () {
        $('.tabs li a').animate({
            height: '150'
        }, 500, function () {
            // Animation complete.
        });
    });
}, function () {
    $('.tabs li a').animate({
        height: '40'
    }, 500, function () {
        $('#tabs-wrap').animate({
            marginTop: '-=147'
        }, 500, function () {
            // Animation complete.
        });
    });
});

1 Ответ

2 голосов
/ 11 января 2011

важно отметить, что обратный вызов выполняется один раз для соответствующего элемента, а не один раз для анимации в целом.(http://api.jquery.com/animate/)

Поскольку $ ('. Tabs li a') возвращает 4 элемента, функция обратного вызова будет выполняться 4 раза, если правильно интерпретировать документацию.

возможно, вы могли бы попробовать что-то вродеэто? 

$('.tabs').hover(
    function(){
        $('#tabs-wrap').animate({marginTop: '+=147'}, 500);
        $('.tabs li a').delay(500).animate({height: '150'}, 500);
    },
    function(){
        $('.tabs li a').animate({height: '40'}, 500);
        $('#tabs-wrap').delay(500).animate({marginTop: '-=147'}, 500);
    }
);
...