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

Serious2008

Дата 28.11.2012, 10:15 (ссылка)

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

Загрузка ...

Опытный

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

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

Здравствуйте, у меня такая ситуация, мне нужно на функцию добавления в корзину сделать эффект помещения его в корзину.

Вот есть такой исходный код который считается должен перемещать копию в корзину, но почему-то именно сама анимация не работает

Код


//id для картинки и для добавления в корзину
  var gid = $(this).data('gid');
//Анимацция начало


var body = $("body");
        var bodyscrl = $('html');

        if($.browser.webkit){
            bodyscrl = $('body');

        }

        var a = $(this);
//Получение класса картинки, проходит всё нормально
        var proxy_src = $('.' + gid + '-proxy');

        if(proxy_src.length == 0){

            proxy_src = a.closest('div');

        }

       
//Какие-то параметры
        var target = $('#head_basket');
        var targetFixed = false;//target.css( "position" ) === "fixed";
        var fixTop = targetFixed ? body.scrollTop() : 0;
        var fixLeft = targetFixed ? body.scrollLeft() : 0;
        var endPosition = target.offset();
        var startPosition = proxy_src.offset();
        var namessss = 'head_basket';
if(endPosition == null)
{
var target = $('#head_basket_alt');
 var namessss = 'head_basket_alt';
        var targetFixed = false;//target.css( "position" ) === "fixed";
        var fixTop = targetFixed ? body.scrollTop() : 0;
        var fixLeft = targetFixed ? body.scrollLeft() : 0;
        var endPosition = target.offset();
        var startPosition = proxy_src.offset();

}

        var body_scroll = {'top':  bodyscrl.scrollTop(), 'left':  bodyscrl.scrollLeft()};

        var ratio = proxy_src.innerHeight() / proxy_src.innerWidth();

        var minimize = (proxy_src.innerWidth() > target.innerWidth()) || (proxy_src.innerHeight() > target.innerHeight());

        var to_width = minimize ? target.innerHeight() / ratio : proxy_src.innerWidth();
        var to_height = minimize ? to_width * ratio : proxy_src.innerHeight();
//Алерты возвращают 
/*
0
105,4
0
0
*/
//соответственно
       var animation = {
            top: endPosition.top - fixTop ,
            left: endPosition.left - fixLeft ,
            height: to_height,
            width: to_width
        };


 


//Копия отлично создаётся это видно если не закомментирован border
        var proxy = proxy_src.clone() //$( '<div>' + a.html() + '</div>' )
                //.addClass( o.className )
               .css({
                    //'background-color': '#f00',
                    top: startPosition.top - fixTop ,
                    left: startPosition.left - fixLeft ,
                    height: proxy_src.innerHeight(),
                    width: proxy_src.innerWidth(),
                    position: targetFixed ? "fixed" : "absolute",
                   // 'border': '2px dotted #666',
                    'display': 'inline'
                    //,'opacity': .5
                })
                .appendTo( body )
            ;

        var callback = function(){


            proxy.fadeOut(200, function(){



                proxy.remove();

            });

           target.load(a.attr('href'), {}, function(resp){

                $("#"+namessss+" .rurnum").formatNumber({format:"#,##0", locale:"ru"});

                if(body_scroll.top > 0){
                    bodyscrl.delay(500).animate({
                        'scrollTop': body_scroll.top
                        ,'scrollLeft': body_scroll.left
                    }, 500);
                }
            });

        };
//Скролит в самое начало страницы, причём отлично
        if(body_scroll.top > 0){
            bodyscrl.animate({
                'scrollTop': 0 // animation.top
                ,'scrollLeft': animation.left
            }, 500);
        }
// А вот следующая команда перезагружает страницу и дальнейшее добавление в корзину не выполняет. Т.е. тут какая-та ошибка такая, что он переходит по ссылке, а не выполняет функцию до конца. Там в самом конце скрипта есть return false, но перед ним есть обновление корзины.
        proxy.animate(animation, 500, 'easeInOutQuad', callback);

Ссылку на это к сожалению показать не могу, так как сайт на локалке.

Может кто знает, почему именно последняя команда даёт сбой. Или может давать, подскажите пожалуйста.

Arantir

Дата 28.11.2012, 10:33 (ссылка)

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

Загрузка ...

Рыбак без удочки

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

Репутация: 5
Всего: 55

Не false надо возвращать, а сделать

Код


event.preventDefault();

в самом начале обработчика клика по ссылке.

По крайней мере, в этом случае не должно обновлять страницу.

Это сообщение отредактировал(а) Arantir - 28.11.2012, 10:37

--------------------

interface Жопа {
// ATTENTION: has to be implemented by every class of the project for proper project work
}

Serious2008

Дата 28.11.2012, 10:47 (ссылка)

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

Загрузка ...

Опытный

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

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

Arantir,
проблема не в обновлении, а в том что не срабатывает анимация

Arantir

Дата 28.11.2012, 11:00 (ссылка)

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

Загрузка ...

Рыбак без удочки

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

Репутация: 5
Всего: 55

Сори, значит неправильно понял комментарий. Мне показалось, что страница обновляется вместо анимации. А это имело ввиду обновление блока.

А у вас JQueryUI подключен, чтобы использовать расширенные easing'и?

--------------------

interface Жопа {
// ATTENTION: has to be implemented by every class of the project for proper project work
}

Serious2008

Дата 28.11.2012, 11:15 (ссылка)

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

Загрузка ...

Опытный

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

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

Arantir,
подключил тот же UI откуда и брал эту анимацию. Она конечно не стала появляться. Но перестало перезагружаться, вообще копия страницы стала появляться и вообще начал ругаться на эту строку

Код


  $("#"+namessss+" .rurnum").formatNumber({format:"#,##0", locale:"ru"});

вот так ругатся
Uncaught TypeError: Object [object Object] has no method 'formatNumber'

Arantir

Дата 28.11.2012, 11:28 (ссылка)

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

Загрузка ...

Рыбак без удочки

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

Репутация: 5
Всего: 55

formatNumber не родная функция ни jQuery, ни jQueryUI. Значит что-то было подключено, что вы отключили.
Можете показать список подключенных скриптов?

Я все еще склоняюсь к тому, что в прежнем варианте у вас в скриптах не было функции для такого easing'а. При неправильном easing она и ошибок не выдает, а просто не срабатывает.

--------------------

interface Жопа {
// ATTENTION: has to be implemented by every class of the project for proper project work
}

Serious2008

Дата 28.11.2012, 11:31 (ссылка)

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

Загрузка ...

Опытный

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

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

Arantir,

Спасибо за мучения со мной, я уже изучил, мне это вообще не нужно. Это лишний код. Проблема была в правильном jquery-ui, на этом сайте где я подключал, он был кастрированный какой-то.

Добавлено через 12 минут и 48 секунд
Теперь более весёлая ситуация, на одной странице. Всё нормально, а на другой jQuery ругается что он не знает метода

Код


Uncaught TypeError: Object #<Object> has no method 'easeInOutQuad'

Хотя хеадеры абсолютно одинаковы на двух страницах.

Arantir

Дата 28.11.2012, 12:40 (ссылка)

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

Загрузка ...

Рыбак без удочки

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

Репутация: 5
Всего: 55

Приведите, пожалуйста, блок кода со второй страницы, где используется проблемная функция.
Не, ну наугад реально трудно ошибки находить =)

--------------------

interface Жопа {
// ATTENTION: has to be implemented by every class of the project for proper project work
}

Serious2008

Дата 28.11.2012, 15:12 (ссылка)

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

Загрузка ...

Опытный

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

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

Arantir,
так она точно такая же как и в первом случае. Тоже эта же функция. Это то меня и смутило.

Картинка которую он хочет взять вот так задаётся

Код


<img class="10-proxy" src="http://hoods.ru/images/maximgs/1342422462.jpg" width="215" style="vertical-align:middle;">

Кнопка по которой срабатывает вызов функции вот так

Код


<a href="#" class="addToCartLink" data-gid="10">Заказать</a>

Т.е. вообще в принципе 1 в 1. Только в первом случае это было для списка товаров, а во втором случае это на странице одного товара.

Функция добавляет в корзину и даже скролит вверх экрана. Но ругается на ту команду. Почему не понимаю.

Arantir

Дата 28.11.2012, 15:35 (ссылка)

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

Загрузка ...

Рыбак без удочки

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

Репутация: 5
Всего: 55

Цитата

Общее правило практически для всех языков программирования и не-програмирования - имена не начинаются с цифр....
Для HTML не допускается цифра в первом символе наименования классов, имен и идентификаторов (class, name, id) в атрибутах тегов.
В пользовательских атрибутах - можно, например, в вашем "data-gid" (data-фишка с HTM5, по видимому).

Это сообщение отредактировал(а) Arantir - 28.11.2012, 15:39

--------------------

interface Жопа {
// ATTENTION: has to be implemented by every class of the project for proper project work
}

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