Сначала
Я отсылаю вас к документации JQuery Animate .
Более конкретно, посмотрите, как они создают очереди анимации.
$('#clickme').click(function() {
$('#book').animate({
width: 'toggle',
height: 'toggle'
}, {
duration: 5000,
specialEasing: {
width: 'linear',
height: 'easeOutBounce'
},
complete: function() {
$(this).after('<div>Animation complete.</div>');
}
});
});
Когда анимация завершится, вы хотите добавить текст.
Решение
ЗдесьJSFiddle рабочего решения .
$('.projectContact').mouseenter(function() {
$(this).animate({
width: "95px"
}, 250, function(){
$(this).text('Request a quote')
});
}).mouseleave(function(){
$(this).animate({
width: "16px"
}, 250, function(){
$(this).html("<img src=\"images/mail.png\">");
});
});
Я использовал mouseenter и mouseleave, потому что они не просто более надежны, но и легче читаются.Как вы можете видеть, последний параметр функции (анимация завершена) в .animate - это место, где вы хотите, чтобы изменения произошли.
Кроме того, вы можете добавить это в свойства стиля для элемента, гдевы в основном заставляете текст оставаться на одной строке и скрываете все, что выходит за границы.Таким образом, при анимации текст не будет влиять на контейнер.
CSS:
.myButton{
white-space: nowrap;
overflow: hidden;
}
То, что вы также можете сделать, это создать класс, содержащий CSS, а затем добавить / удалитьв начале / конце каждой анимации, если вы не хотите, чтобы CSS мешал остальной части вашего CSS.
Окончательное решение
Хорошо, вот окончательное решение , с затуханиями и всем прочим.Это не завершено, но вы получите картину.
var current_element = "img";
$('.projectContact').mouseenter(function() {
var par = $(this);
$('.projectContact '+current_element).animate({
opacity: 0
}, 250, function(){
par.animate({
width: "95px"
}, 250, function(){
par.html('<div>Request a quote</div>');
current_element = "div";
});
});
inside = true;
}).mouseleave(function(){
var par = $(this);
$('.projectContact '+current_element).animate({
opacity: 0
}, 250, function(){
par.animate({
width: "16px"
}, 250, function(){
par.html('<img src="http://www.hager.se/icons/icon_mail.gif">');
current_element = "img";
});
});
});
Вы можете возиться со временем анимации, но это в основном, как вы это делаете.Мне пришлось добавить «div» к вашему тексту «Запрос цитаты», чтобы иметь возможность анимировать его индивидуально.Таким образом, вы также можете играть с его непрозрачностью.
Удачи!
Альтернативное решение
Вот другой подход , где вы редактируете текст / изображение элемента в тот момент, когда вы начинаете анимацию.Это метод, который вы используете в настоящее время.Обратите внимание, что CSS white-space: nowrap; необходим для того, чтобы это работало, не делая анимацию "уродливой".
$('.projectContact').mouseenter(function() {
$(this).animate({
width: "95px"
}, 250).text('Request a quote');
}).mouseleave(function(){
$(this).animate({
width: "16px"
}, 250).html("<img src=\"images/mail.png\">");
});
Завершающие мысли
Было бы неплохо использовать .clearQueue , чтобы ваши анимации не начиналисьнакапливать.Он сбрасывает очередь анимации и останавливает анимацию, поэтому в этом случае, если пользователь быстро наводит курсор мыши на вход и выход, анимация переходит непосредственно к анимации mouseleave.
Это также особенно полезно, например, когда пользовательнаведите курсор мыши на элемент дважды или более, прежде чем первая последовательность анимации будет завершена, он предотвращает накопление анимации.
просмотрите его в использовании
$('.projectContact').mouseenter(function() {
$(this).animate({
width: "95px"
}, 250).text('Request a quote').clearQueue();
}).mouseleave(function(){
$(this).animate({
width: "16px"
}, 250).html("<img src=\"images/mail.png\">").clearQueue();
});
В качестве альтернативывы можете использовать .stop , который делает то же самое, но только для текущей анимации, а не для всей очереди анимации.