Add and romove class. Nie działa duration.

0

Witam
Napisałem prosty kod w JQuery i mam mały problem. A mianowicie dodawanie i zdejmowanie klasy działa natychmiastowo zamiast płynnie mimo, ze ustawiam czas 1000ms. Uzyskałem efekt płynnego przejścia poprzez transition .5s w css ale przy zdejmowaniu klasy już nie działa. Proszę o pomoc.
Pozdrawiam

''' $(window).on("scroll", function() {
if ($(window).scrollTop()) {
$("nav").addClass("black",1000);
$("#image").addClass("smallImg",1000)
} else {
$("nav").removeClass("black",1000);
$("#image").removeClass("smallIng",1000);
}
})'''

0

Wrzuć to na http://jsfiddle.net i podeślij link.

1

Skąd pomysł, że w jQuery funkcje addClass i removeClass przyjmują liczbę milisekund jako parametr? W dokumentacji nie widzę informacji na ten temat. Możesz użyć funkcji setTimeout, żeby wywołać funkcję po określonym czasie.

const CHANGING_CLASSES_DELAY_MILLISECONDS = 1000;
let changingClassesTimeout; 

function addClasses() {
  $("nav").addClass("black");
  $("#image").addClass("smallImg");
}

function removeClasses() {
  $("nav").removeClass("black");
  $("#image").removeClass("smallImg");
}

$(window).on("scroll", function() {  
  clearTimeout(changingClassesTimeout);
  
  if ($(window).scrollTop()) {
    changingClassesTimeout = setTimeout(addClasses, CHANGING_CLASSES_DELAY_MILLISECONDS);
  } 
  else {
    changingClassesTimeout = setTimeout(removeClasses, CHANGING_CLASSES_DELAY_MILLISECONDS);
  }
});
1

Dziękuję za pomoc. Udało mi si również rozwiązać problem dodając transition do klasy początkowej i wszystko płynnie się zmienia.
Tutaj jest wzór parametru milisekund http://api.jqueryui.com/removeclass/ . Widziałem również to na tutorialu na YT.

1 użytkowników online, w tym zalogowanych: 0, gości: 1