#javascript #jquery #jquery-animate
#javascript #jquery #jquery-анимировать
Вопрос:
Я вижу проблему, связанную с некоторой анимацией jquery в Chrome. Мне интересно, видел ли это кто-нибудь еще.
Я просто пытаюсь сделать простой слайд вверх, чтобы скрыть div, или скрыть, а затем скрыть div. Анимация сдвига вверх в div не выполняется в Chrome, и скрытие отстает до того, как начнется затухание; в то время как в firefox анимация выполняется мгновенно и плавно.
Дело в том, что у меня есть подтверждение браузера, обернутое вокруг этого материала, чтобы делать эту анимацию только в том случае, если пользователь подтвердит. Если я удалю подтверждения, анимация в Chrome будет работать нормально.
Это странно?
Вот пример. При подтверждении я не получаю слайд вверх. Без подтверждения я получаю его. То есть просто удалите блок кода if(confirm){}.
if (confirm('Are you sure you want to remove the item?')) {
dragbox.slideUp('fast', function () {
dragbox.remove();
WebService.RemoveItem(itemId,
//on success
function () {
if ($('.dragbox').length == 0) {
//remove columns
$('.column').remove();
}
},
//on fail
function () {
alert('Failed to remove the "' itemName '" item.');
}
);
});
}
В этом примере при подтверждении происходит задержка после скрытия div и перед началом затухания, так что div скрыт дольше, чем хотелось бы. Без подтверждения ti ведет себя так, как я и ожидал.
if (confirm('Are you sure?')) {
$('#' itemId).spin();
WebService.AddItem(itemId,
//onsuccess
function (r) {
var item = $('#' itemId); //this is a div
item.unspin();
item
.hide()
.toggleClass('item-added')
.fadeIn('fast', function () {
// Create the DOM elements
$('<p><img class="item-added" src="images/item-added.png" />')
// Sets the style of the elements to "display:none"
.hide()
// Appends the hidden elements to the "posts" element
.appendTo($('.contentInfo', item))
// Fades the new content into view
.fadeIn('fast');
});
},
//onfail
function () {
$('#' itemId).unspin();
alert('Failed');
}
);
}
Кто-нибудь может подтвердить или опровергнуть это понятие на основе моих предположений и примера?
Какие есть альтернативы подтверждению браузером?
РЕДАКТИРОВАТЬ: Да, я не уверен, что происходит.
Комментарии:
1. Правильно ли я понимаю, что вы запрашиваете подтверждение после запуска анимации? Затем отменить его, если пользователь не подтвердит? (Я предполагаю, что это то, что вы подразумеваете под «завернутым») Не могли бы вы просто выполнить подтверждение, а затем запустить анимацию? (мне кажется, пример может здесь немного помочь)
2. У вас есть jQuery, АЛЬТЕРНАТИВНЫЙ ВАРИАНТ: используйте модальный диалог jQuery (jQuery UI) вместо уродливого подтверждения
3. этот же код, показанный выше, работает нормально и стабильно в firefox и IE.
Ответ №1:
Вы используете новейшую версию jQuery UI? У вас также есть таблица стилей пользовательского интерфейса jQuery? Все выглядит нормально. Если вы не можете найти ответ здесь, откройте отчет об ошибке.
Комментарии:
1. я использую 1.6.2, и я не был уверен, что в этом случае мне нужна jquery-ui-stylesheet.
2. хорошо, кажется, что браузер подтверждает, что он обернут вокруг кода javascript, который выполняет анимацию jquery, каким-то образом искажает анимацию… если я не использую подтверждение браузера, анимация в Chrome работает нормально. в Firefox это не проблема.
Ответ №2:
Обновление Chrome исправляет это. Сейчас я использую версию 15.0.874.120, и все хорошо. Мое слово.
Ответ №3:
Я просто испытывал то же самое с некоторым кодом, который работал, когда он был написан пару лет назад. Теперь у него проблемы в браузерах на основе webkit.
У меня было несколько анимаций, которые были приостановлены с помощью вызовов confirm(), и последующие анимации не отображались должным образом. Я, наконец, понял, что если я поставлю небольшую задержку перед анимацией, она начнет работать должным образом.
if (confirm('Are you sure?')) {
dragbox.delay(10).slideUp('fast', function () { ...
Я не совсем уверен, почему это работает, но мои анимации теперь снова работают в Safari 6.0.3 и Chrome 26.0.1410.43