Почему медленно меняются классы?

Question

[cvbcvb cvbcvbcvbcvb]

Вот код:

$(window).scroll(function(){

    if ($(this).scrollTop() > 1){
        $(".top_panel").animate({height: "60px"}, 200);
        $(".logo_cont").animate({lineHeight: "60px"}, 200);
        $(".main_menu").animate({lineHeight: "60px"}, 200);
    }else{
        $(".top_panel").animate({height: "90px"}, 200);
        $(".logo_cont").animate({lineHeight: "90px"}, 200);
        $(".main_menu").animate({lineHeight: "90px"}, 200);
    }
    
});

Проблема в том, что когда листаю меню вниз - все хорошо, плавно меняется.
Но когда листаю вверх (обратно к началу страницы), то очень медленно меняется все.
И при чем, чем ниже долистал вниз, тем дольше меняется.
Помогите!

Comments

[Nikolay Talanov]

По нормальному такие вещи делаются с помощью добавления/убирания класса, что будет триггерить css transition анимацию. Использование jQuery.animate() в 2015 должно расцениваться как преступление.

[cvbcvb cvbcvbcvbcvb]

Nikolay Talanov: точняяяк. я уже поменял на добавление класса. Не добавил транзишн в ЦСС.

[cvbcvb cvbcvbcvbcvb]

Nikolay Talanov: так?
$(window).scroll(function(){
if ( $(this).scrollTop() > 50 ) {
$(".top_panel").addClass("scroll");
$(".logo_cont").addClass("logo_cont_scrolled");
$(".main_menu").addClass("main_menu_scrolled");
} else {
$(".top_panel").removeClass("scroll");
$(".logo_cont").removeClass("logo_cont_scrolled");
$(".main_menu").removeClass("main_menu_scrolled");
}
});

CSS:
.top_panel{
height: 90px;
width: 100%;
z-index: 999;
position: fixed;
top: 0;
left: 0;
background-color: white;
-webkit-transition: all .25s;
-o-transition: all .25s;
transition: all .25s;
}

.scroll{
height: 60px;
width: 100%;
z-index: 999;
position: fixed;
top: 0;
left: 0;
background-color: white;
-webkit-transition: all .25s;
-o-transition: all .25s;
transition: all .25s;
}

Answer 1

[reifter]

Попробуй останавливать анимацию, перед началом новой

$(window).scroll(function(){

if ($(this).scrollTop() > 1){
$(".top_panel").stop().animate({height: "60px"}, 200);
$(".logo_cont").stop().animate({lineHeight: "60px"}, 200);
$(".main_menu").stop().animate({lineHeight: "60px"}, 200);
}else{
$(".top_panel").stop().animate({height: "90px"}, 200);
$(".logo_cont").stop().animate({lineHeight: "90px"}, 200);
$(".main_menu").stop().animate({lineHeight: "90px"}, 200);
}

});

А вообще, для оптимизации нужно запускать только один раз анимацию

var flagPosition=0;
$(window).scroll(function(){

if ($(this).scrollTop() > 1){
 if(flagPosition!=1) {
   flagPosition=1;
   $(".top_panel").stop().animate({height: "60px"}, 200);
   $(".logo_cont").stop().animate({lineHeight: "60px"}, 200);
   $(".main_menu").stop().animate({lineHeight: "60px"}, 200);
 }
} else {
 if(flagPosition!=0) {
  flagPosition=0;
  $(".top_panel").stop().animate({height: "90px"}, 200);
  $(".logo_cont").stop().animate({lineHeight: "90px"}, 200);
  $(".main_menu").stop().animate({lineHeight: "90px"}, 200);
 }
}

});

Comments

[Евгений Петров]

И нежелательно заниматься траверсом во время скроллирования. Нашли элементы, сохранили, а потом по ссылкам обращаемся.