VPF::jQuery анимация - Форум программистов

fesor

Дата 27.7.2009, 13:06 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 121
Регистрация: 16.7.2009
Где: Минск

Репутация: нет
Всего: 4

Собственно в неизвестном месте страницы есть картинка. (иконка товара скажем так). Размер произвольный но пропорции одинаковые (1:1)

Есть DIV который тоже неизвестно где на странице. Задача - переместить иконку в этот DIV постепенно ее уменьшая и постепено ее растворяя

Собственно мой вариант очень некрасивый:

Код


var ckicked = false;
$(document).ready(function(){
    $(".run").click(function(){
        if(!ckicked) {
            ckicked = true;
            new_x = $("#basket").x() - $("#image").x();
            new_x = new_x >= 0 ? new_x = "+"+new_x : new_x = "-"+new_x;
            new_y = $("#basket").y() - $("#image").y();
            new_y = new_y >= 0 ? new_y = "+"+new_y : new_y = ""+new_y;
            old_width = $("#image").width();
            old_height = $("#image").height();
            old_x = $("#basket").x() - $("#image").x() - 1200;
            old_x = old_x >= 0 ? old_x = "-"+old_x : old_x = "+"+(0-old_x);
            old_y = $("#basket").y() - $("#image").y();
            old_y = old_y >= 0 ? old_y = "-"+old_y : old_y = "+"+(0-old_y);
            
            $("#image").css("position","relative")
            .animate({opacity: "0", height: "20", width: "20", left:new_x, top:new_y}, "slow")
            .animate({opacity: "1", height: old_height, width: old_width, left:0, top:0}, 0);
            return false;
        }
        else
            return false;
    });
});

$.fn.x = function(n) {
    var result = null;
    this.each(function() {
        var o = this;
        if (n === undefined) {
            var x = 0;
            if (o.offsetParent) {
                while (o.offsetParent) {
                    x += o.offsetLeft;
                    o = o.offsetParent;
                }
            }
            if (result === null) {
            result = x;
            } else {
                result = Math.min(result, x);
            }
        } else {
            o.style.left = n + 'px';
        }
    });
    return result;
    };

$.fn.y = function(n) {
    var result = null;
    this.each(function() {
        var o = this;
        if (n === undefined) {
            var y = 0;
            if (o.offsetParent) {
                while (o.offsetParent) {
                    y += o.offsetTop;
                    o = o.offsetParent;
                }
            }
            if (result === null) {
                result = y;
            } else {
                result = Math.min(result, y);
            }
        } else {
            o.style.top = n + 'px';
        }
    });
    return result;
};

Как это сделать более прилично?

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Применение библиотек \| Следующая тема »