Проблемы с анимационными эффектами jquery - PullRequest
Новая
       2

Проблемы с анимационными эффектами jquery

1 голос
/ 12 ноября 2011

Пример в реальном времени здесь

  • Нажмите любую из кнопок.Вы видите эффект дрожания слайдов?На самом деле это должно быть плавное и медленное скольжение вниз.
  • Если вы нажали одну кнопку, нажмите любую другую кнопку.Показывать и скрывать анимацию форм ужасно.

Во время анимации.enter image description here

После аним.Result after animation

Как решить эту проблему?

Ответы [ 4 ]

2 голосов
/ 12 ноября 2011

Кажется, что дрожание происходит, когда каждый из элементов на вкладке скрыт или отображается.

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

1 голос
/ 12 ноября 2011

Попробуйте играть с .animate() и .fadeIn() .fadeOut() .fadeTo(time,opacity) вместо просто .show() или .hide()

0 голосов
/ 12 ноября 2011

Вы можете немного ускорить процесс, сделав меньше вызовов $ (селектор) ... кэшируйте некоторые из ваших объектов jQuery, когда вы используете их несколько раз ... также помните, что вы можете связывать функции в объектах jQuery .. jQO.addClass("foo").removeClass("bar"); - это то же самое, что и jQO.addClass("foo"); jQO.removeClass("bar");

, например ... 

(function(){
    var signin = $("#signin"), signup = $("#signup"), signin_f = $("#signin_form"), holder = $("#holder"), signup_f = $("#signup_form"), f_container = $("#form_container");
    $(".button").click(function () {
        if (counter === 0) {
            signin.removeClass('default_radius').addClass('right_radius');
            signup.removeClass('default_radius').addClass('left_radius');
            $("#first").animate({
                marginTop: "-=150px",
            }, 500);
        }
    });
    signup.click(function () {
        if (counter === 0) {
            holder.addClass('red_border').slideDown("slow");
            f_container.show();
            signup_f.show(0);
        } else {
            signin_f.hide(0);
            holder.switchClass( "green_border", "red_border", 1000 );
            f_container.animate({height:"260px"},1000);
            signup_f.show(0);
        }
        counter++;
    });
    signin.click(function () {
        if (counter === 0) {
            holder.addClass('green_border').slideDown("slow");
            f_container.show();
            signin_f.show(1000);
        } else {
            signup_f.hide(0);
            holder.switchClass( "red_border", "green_border", 1000 );
            f_container.animate({height:"110px"},1000);
            signin_f.show(0);
        }
        counter++;
    }); 
})();
0 голосов
/ 12 ноября 2011

Это загружается довольно хорошо для меня.Однако это заняло много времени для загрузки в первую очередь.Если вы перейдете по адресу: http://gtmetrix.com/reports/tural.no-ip.org/ANBNA45n, вы увидите, что ваша страница загружается довольно медленно, и эффект заикания, который вы видите, вероятно, исходит от вашего компьютера, имеющего проблемы с количеством поступающей информации.

...