Есть ли способ замедлить эффект наведения? У меня есть эффект зависания на моем сайте (удален), который отображает текст при наведении изображений. Я хочу немного замедлить эффект. Это немного странно, как быстро изображение переключается.Есть ли способ замедлить эффект наведения?
Как бы я это сделал?
Вы можете добавить 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;
Работает ли это с '*: hover'? – xameeramir
Это зависит от того, как вы отображения текста. Если вы изменяете свойство CSS, вы можете сделать это с помощью CSS3 transitions. Ниже приведен пример.
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: Дэвид Томас сказал мне, что вы не можете чан ge дисплей с переходами. Я обновил выше, чтобы использовать непрозрачность.
Вы не можете «переходить» между состояниями 'display'; конечно, не между «display: block» и «display: none». Содержимое будет просто прыгать, а затем, возможно, оживить. –
@DavidThomas, спасибо за головы. Я этого не знал. Возможно, это можно сделать с непрозрачностью? Я отредактировал свой ответ, чтобы отразить это. – Zhihao
Да, вы можете перейти на «непрозрачность». Я считаю, что здесь лучший вариант. – BoltClock
Если вы хотите, вы можете использовать JQuery .fadeIn() http://api.jquery.com/fadeIn/
.fadeIn ([продолжительность] [, обратный вызов])
длительность строка или число, определяющие, как долго анимация будет запущена.
callback Функция вызова после завершения анимации.
Я знаю, что это довольно поздно, но посмотрите на анимацию CSS3. Я использую анимацию на одном из экранов загрузки 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>Я знаю, что это не совсем результат ваш искать, но я уверен, что вы и другие могут найти это полезным.
- это вариант для использования jQuery? –
http://cherne.net/brian/resources/jquery.hoverIntent.html –