Запуск анимации jQuery в унисон

Question

Я делаю скользящее меню jQuery, которое активируется при наведении курсора.

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

Кажется, это работает так, как я это представляю, используя приведенный ниже скрипт, но в IE 7 это не так, поэтому я думаю, что сценарий может быть лучше.

Элементы div, на которых я запускаю анимацию, плотно прижаты друг к другу, между ними нет зазора.

Поэтому я подумал, что с помощью приведенного ниже сценария, нацеленного на два элемента div, расположенных рядом друг с другом .. # sidebar-inner и # latest-tweet , он будет автоматически оставайтесь на первой функции, но когда я перехожу с # sidebar-inner div на # latest-tweet div , в IE он запускает вторую функцию и затем запускает первую функцию .

    $('#sidebar-inner,#latest-tweet').hover(function() {
        $("#wrapper").animate({ left: "-178px" }, 300);
        $("#sidebar-slider").animate({ width: "512px" }, 300);
        $("#latest-tweet").animate({ width: "512px" }, 300);
    }, function() {
        $("#wrapper").animate({ left: "0" }, 300);
        $("#sidebar-slider").animate({ width: "334px" }, 300);
        $("#latest-tweet").animate({ width: "334px" }, 300);        
    });

Как я могу изменить скрипт, чтобы в конечном итоге он работал в чистом унисон.

Или это невозможно?

Любая помощь будет высоко оценена, спасибо.

СМОТРИТЕ ПРОСТОЙ JSFIDDLE НА ОСНОВЕ ВОПРОСА, ЧТОБЫ ПОМОЧЬ СПАСИБО
http://jsfiddle.net/motocomdigital/9zeYc/

Answer 1

Проблема в том, что ваша анимация находится в очереди. То есть они добавляются друг к другу. Добавьте stop() к вашей анимации. Это предотвратит их дальнейшую работу при повторном зависании:

$('#sidebar-inner, #latest-tweet').hover(function() {
    $("#sidebar-inner").stop().animate({ right: "0" }, 300);
    $("#latest-tweet").stop().animate({ right: "0" }, 300);
}, function() {
    $("#sidebar-inner").stop().animate({ right: "-250px" }, 300);
    $("#latest-tweet").stop().animate({ right: "-250px" }, 300);        
});

http://jsfiddle.net/Zc7LL/

Вы также можете запретить анимацию ставить в очередь следующим образом:

$("#sidebar-inner").animate({ right: "0" }, { duration: 300, queue: false });

Однако, это не так гладко, как остановка анимации.