Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: для новичков > Анимация перемещения


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

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

//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
Не false надо возвращать, а сделать
Код

event.preventDefault();
в самом начале обработчика клика по ссылке.

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

Автор: Serious2008 28.11.2012, 10:47
Arantir, 
проблема не в обновлении, а в том что не срабатывает анимация

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

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

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

Код

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

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

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

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

Автор: Serious2008 28.11.2012, 11:31
Arantir, 

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

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

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

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

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

Автор: Serious2008 28.11.2012, 15:12
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
Цитата
<img class="10-proxy" src="http://hoods.ru/images/maximgs/1342422462.jpg" width="215" style="vertical-align:middle;">

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

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)