Czy istnieje sposób na spowolnienie efektu zawisu? Mam efekt najechania na moją stronę (usunięto), który wyświetla tekst na zawisie obrazów. Chcę trochę spowolnić efekt. To trochę dziwne, jak szybko obraz się zmienia.Czy istnieje sposób na spowolnienie efektu zawisu?
Jak to zrobić?
Można dodać przejścia CSS3:
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
Czy działa z '*: hover'? – xameeramir
To zależy od tego, jak jesteś wyświetlania tekstu. Jeśli zmieniasz właściwość CSS, możesz to zrobić pod numerem CSS3 transitions. Poniżej znajduje się przykład.
HTML:
<div id="A"></div><div id="B"></div>
CSS:
div {
height: 100px;
width: 100px;
position: absolute;
top: 0;
left: 0;
-moz-transition: opacity 4s; /* Firefox */
-webkit-transition: opacity 4s; /* Safari and Chrome */
-o-transition: opacity 4s; /* Opera */
transition: opacity 4s;
}
#A {
background: red;
opacity: 1;
z-index: 1;
}
#B {
background: blue;
opacity: 0;
z-index: 2;
}
#B:hover {
opacity: 1;
}
Edit: David Thomas powiedział mi, że nie można chan ge wyświetlacz z przejściami. Zaktualizowałem powyższe, aby użyć nieprzezroczystości.
Nie można "przejść" między stanami "wyświetlania"; na pewno nie pomiędzy 'display: block' i' display: none'. Treść będzie po prostu skakać, a następnie, być może, animować. –
@DavidThomas, dzięki za heads up. Nie wiedziałem o tym. Być może można to zrobić z nieprzezroczystością? Zmieniłem moją odpowiedź, aby to odzwierciedlić. – Zhihao
Tak, możesz przejść 'krycie'. Uważam, że lepsza opcja tutaj. – BoltClock
Jeśli chcesz, możesz użyć jQuery .fadeIn() http://api.jquery.com/fadeIn/
.fadeIn ([czas] [, callback])
trwania ciąg lub numer określenia, jak długo animacja zostanie uruchomiona.
funkcja callback służy do wywoływania po zakończeniu animacji.
Wiem, że jest dość późno, ale spójrz na animacje CSS3. Używam animacji na jednym z ekranów ładowania Garry's Mod.
/* Styles go here */
button {
margin-left: 50%;
margin-right: 50%;
}
button:hover {
-webkit-animation: breathing 5s ease-out infinite normal;
animation: breathing 5s ease-out infinite normal;
}
@-webkit-keyframes breathing {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
}
75% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes breathing {
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
}
50% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
75% {
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
}
100% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<p>Below I have a button that changes size on mouse hover useing CSS3</p>
<button>Hover over me!</button>
</body>
</html>wiem, że to nie jest całkiem wynikiem szukasz, ale jestem pewien, że można znaleźć i inni to użyteczne.
jest opcją do korzystania z jQuery? –
http://cherne.net/brian/resources/jquery.hoverIntent.html –