Не делайте такую штуку, для нее куча ограничений, например, корзина и картинка должны быть в одном контейнере, причем картинка не должна находиться во вложенном контейнере со свойством position:relative. Плюс притормаживать может, т.е. сначала все обновится, потом полетит картинка, да еще с масштабированием.
В общем, красивая "свистелка/перделка" (сорри), но бесполезная.
Если есть желание, отправлю код со старого шаблона (script.js в главном шаблоне), но разбираться вам придется самостоятельно.
Код |
---|
function addToCart(element, imageToFlyId, mode, text)
{
if (!element || !element.href)
return;
var button = $(element);
if (mode == "detail"
button.toggleClass("disabled".unbind('click').css("cursor", "default";
else if (mode == "list"
button.removeClass("catalog-item-buy".addClass("catalog-item-in-the-cart".unbind('click').css("cursor", "default";
$.get(
element.href + "&ajax_buy=1",
$.proxy(
function(data) {
if (this.mode == "detail"
this.button.removeAttr("href".html("<span>" + text + "</span>";
else if (this.mode == "list"
this.button.removeAttr("href".html(text);
var imageElement = document.getElementById(this.imageToFlyId);
if (!imageElement)
{
$("#cart_line".html(data);
return;
}
var hoverClassName = "";
var wrapper = null;
if (this.mode == "detail"
{
hoverClassName = "catalog-detail-hover";
wrapper = this.button.parents("div.catalog-detail";
}
else if (this.mode == "list"
{
hoverClassName = "catalog-item-hover";
wrapper = this.button.parents("div.catalog-item";
}
wrapper.unbind("mouseover".unbind("mouseout".removeClass(hoverClassName);
// Начало летучего кода
var imageToFly = $(imageElement);
var position = imageToFly.position();
var flyImage = imageToFly.clone().insertBefore(imageToFly);
flyImage.css({ "position": "absolute", "left": position.left, "top": position.top });
flyImage.animate({ width: 0, height: 0, left: 10, top: 40 }, 600, 'linear');
flyImage.data("hoverClassName", hoverClassName);
flyImage.queue($.proxy(function() {
this.flyImage.remove();
$("#cart_line".html(data);
if (this.wrapper.data("adminMode" === true)
{
var hoverClassName = "";
if (this.mode == "detail"
hoverClassName = "catalog-detail-hover";
else if (this.mode == "list"
hoverClassName = "catalog-item-hover";
this.wrapper.addClass(hoverClassName).bind({
mouseover: function() { $(this).removeClass(hoverClassName).addClass(hoverClassName); },
mouseout: function() { $(this).removeClass(hoverClassName); }
});
}
}, {"wrapper" : wrapper, "flyImage" : flyImage, "mode": this.mode}));
}, { "button": button, "mode": mode, "imageToFlyId" : imageToFlyId }
)
);
return false;
} |