У меня есть набор иконок, которые, когда я наводил на них курсор, запускают анимацию, которая включает в себя анимацию левой и верхней позиции другого изображения. Затем, когда я нажимаю значок, изображение возвращается в исходное состояние. Проблема в том, что если я отчаянно переместите курсор на все значки очень быстро, левая и верхняя позиции анимированных изображений не вернутся в исходное состояние, как ожидалось.jquery animate производит нечетные результаты
Вот код - любые идеи, как я могу убрать это и предотвратить это и любые другие проблемы?
$("div").hover(function() {
$(this).find("span").slideDown(100);
$(this).css("background-color","#89A7BA");
var currentlyHovered = $(this).find("img").attr("id").replace("-icon", "");
$("img#" + currentlyHovered + "-spot").animate({
width: "17px",
height: "17px",
left: parseInt($("img#" + currentlyHovered + "-spot").css("left")) - 5,
top: parseInt($("img#" + currentlyHovered + "-spot").css("top")) - 5
}, 100);
}, function() {
$(this).find("span").slideUp(100);
$(this).css("background-color","#000");
$("img#" + currentlyHovered + "-spot").animate({
width: "7px",
height: "7px",
left: parseInt($("img#" + currentlyHovered + "-spot").css("left")) + 5,
top: parseInt($("img#" + currentlyHovered + "-spot").css("top")) + 5
}, 100);
currentlyHovered = "";
});
Для всех, кого это интересует, вот полное решение.
$.fn.hoverAnimation = function() {
return this.each(function() {
var currentlyHovered = $(this).find("img").attr("id").replace("-icon", "");
var originalLeft = parseInt($("img#" + currentlyHovered + "-spot").css("left"));
var originalTop = parseInt($("img#" + currentlyHovered + "-spot").css("top"));
return $(this).hover(function() {
$(this).find("span").slideDown(100);
$(this).css("background-color","#89A7BA");
$("img#" + currentlyHovered + "-spot").animate({
width: "17px",
height: "17px",
left: originalLeft - 5,
top: originalTop - 5
}, 100);
},function() {
$(this).find("span").slideUp(100);
$(this).css("background-color","#000");
$("img#" + currentlyHovered + "-spot").animate({
width: "7px",
height: "7px",
left: originalLeft,
top: originalTop
}, 100);
});
});
}
$("div").hoverAnimation();
Я рад, что мое решение сработало для вас. Я большой поклонник создания ad-hoc плагинов jQuery для простых, но повторяемых задач. – 2010-12-15 10:17:07