Animowany wyświetlacz CSS
Czy istnieje sposób na animowanie właściwości wyświetlania CSS w jQuery? Mam:
$(".maincontent").css("display","block");i chcę, żeby zrobił coś takiego:
$(".maincontent").animate({"display": "block"}, 2500);Nie znaleziono powiązanych wyników
Zaproszony:
Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się
4 odpowiedzi
Anonimowy użytkownik
Potwierdzenie od:
$("div").css({"opacity":"0",
"display":"block",
}).show().animate({opacity:1})
Przykład:
http://jsfiddle.net/charlescarver/g7z6m
http://jsfiddle.net/charlescarver/g7z6m/
/
Uwzględnia to, ponieważ nadal będzie usuwany ze strumienia strony, dopóki kod nie zostanie wywołany w miejscu, w którym go wyświetli, a następnie ustaw jego krycie na 0. Następnie animuje jego przezroczystość na 1 podczas wywoływania kodu.
Anonimowy użytkownik
Potwierdzenie od:
$(".maincontent").show(2500);Edytuj (na podstawie komentarzy
) :
Powyższy kod znika w elemencie w ciągu 2,5 sekundy. Jeśli zamiast tego chcesz opóźnienie 2,5 sekundy, a następnie chcesz, aby element był wyświetlany, użyj następującego:
$(".maincontent").delay(2500).fadeIn();O ile oczywiście nie chcesz opóźnienia i dłuższego zaniku, po prostu podaj żądaną liczbę milisekund dla każdej metody.
Anonimowy użytkownik
Potwierdzenie od:
Możesz użyć metody. TO ZNACZY:
$(".maincontent").delay(2500).show();Anonimowy użytkownik
Potwierdzenie od:
$(".maincontent").animate({opacity:1},1000)Wtedy css powinien wyglądać tak:
.maincontent{opacity: 0;
}
Jeśli planujesz ukryć cały blok przed przejściem, możesz mieć właściwość wyświetlania.
.maincontent{opacity: 0;
display: none;
}
Następnie pokaż blok z animacją:
$(".maincontent").show().animate({opacity:1},1000 function(){(callback function here)
})
Mam nadzieję że to pomoże!