#jquery #html #css #webkit #background-position
#jquery #HTML #css #webkit #фоновая позиция
Вопрос:
Сложно объяснить проблему, которую я пытаюсь решить. Я сделал очень простой JSFiddle, чтобы помочь.
#image {
width:400px;
height:400px;
background-image:url('http://th07.deviantart.net/images3/PRE/i/2004/142/8/b/Tileable_Checkered_Floor.jpg');
background-size:150%;
background-position:left center;
transition:5s linear;
-moz-transition:5s linear;
-webkit-transition:5s linear;
}
#image:hover {
background-position:right center;
}
В основном все работает так, как я хотел бы, чтобы в Firefox, когда вы наводите курсор на фоновую прокрутку, и если вы уберете мышь, если она вернется с той же скоростью, даже если анимация не закончилась. Однако в Safari / Chrome он анимируется за то же время, намного медленнее, если анимация не закончилась, если вы не понимаете, вы поймете, что я имею в виду, когда увидите это. В принципе, есть ли простое решение для этого с помощью CSS или мне нужно написать какой-нибудь Javascript, чтобы исправить это?
Спасибо! Алекс
Комментарии:
1. Для этого исправления не требуется js.
2. надеюсь, нет! У меня был бы соблазн смириться с этим как есть, я полагаю, что js может быть весьма вовлечен
Ответ №1:
Просто добавьте время перехода к вашему классу:hover .
#image:hover {
background-position:right center;
-moz-transition:2s linear;
-webkit-transition:2s linear;
}
Комментарии:
1. это, похоже, не решило проблему для меня, я думаю, что время нужно будет скорректировать в зависимости от того, как долго пользователь зависал. Но Firefox, похоже, выполняет этот расчет за вас.
2. Может быть, я был неясен, вы хотите, чтобы он возвращался с той же скоростью, с которой он двигался?
3. Какую версию chrome вы используете, я протестировал это в Chrome, Safari, ie, все работает нормально.
4. Последние версии Chrome и Safari на Mac, да, я бы хотел, чтобы они возвращались с той же скоростью, даже если мышь была перемещена до завершения анимации. Если вы дадите ему дойти до конца, все будет в порядке, если вы сразу же уберете его, он оживит это небольшое количество в течение 5 секунд, что выглядит нелепо. Firefox — единственный браузер, который я тестировал, у которого нет этой проблемы.