Плавный переход между двумя (класс) и (класс): зависание

Question

Есть ли скрипт / способ, который делает обычный CSS :hover более плавным?

Можно предположить, что у вас есть два класса, возможно, с градиентным фоном, и сценарий плавно поменяет местами классы. Таким образом, градиенты будут выглядеть как нажатие кнопки. Должен быть автоматическим, поэтому вы вызываете триггер: $('.someclass').SmoothTransition();, и он автоматически использует .someclass:hover в качестве второго класса.

<ч />

Bounty edit

На самом деле это очень интересный вопрос, на который я получил частичный ответ. Проблема с моим ответом состоит в том, что он работает только для сплошного фона и не работает с градиентами CSS или любым другим более конкретным параметром.

Этот скрипт должен быть обязательным в любой библиотеке разработчиков jQuery. Поэтому я предлагаю 150 повторений любому, кто может придумать способ или найти хороший ресурс, который может это сделать.

Если ваш метод (одиночный плагин jQuery) работает для всех этих примеров, то вы выиграли!

Примеры: http://jsfiddle.net/4pYWD/

<ч />

Современные дни редактировать

Так как этот вопрос задавался в 2011 году, когда переход CSS был коммерческой игрой, не было выбора. Тогда поймите, почему все сосредоточено на JS, а не CSS, в этом вопросе. Из этих ответов я разработал сценарий JS, который в то время был идеальным. Теперь это не так, переходы CSS являются окончательным решением, поэтому правильный ответ был принят повторно.

Answer 1

Вы можете использовать css3 переходы для достижения этой цели.

Пример:

a {
    color: blue;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

a:hover {
    color:yellow;
}

Вы можете проверить это вживую здесь .

Пример был дан со статическими цветами, но вы также можете использовать css3 градиенты :

a {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    background: -webkit-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
    background: -moz-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
}

a:hover {
    background: -webkit-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
    background: -moz-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
}

Answer 2

http://jsfiddle.net/btleffler/MZ6T8/

Работает в Chrome, Safari для Windows и Opera.Firefox и IE имеют скудную поддержку объектов CSSRules, поэтому результаты в лучшем случае сомнительны.Я продолжу работать над этим, чтобы посмотреть, смогу ли я решить проблемы.

Стили CSS также должны быть настроены.Поскольку в последнем примере цвет фона не назначен селектору :hover, у нового элемента нет цвета фона.

Если у кого-то есть идеи по этому поводу, я бы хотел их услышать.

---

РЕДАКТИРОВАТЬ: ИСПРАВЛЕНО

http://jsfiddle.net/btleffler/JfPBS/

Этот работает лучше.Я просматриваю все правила css для селекторов :hover, затем сохраняю текст CSS, связанный с этим правилом, и правило non: hover как объект javascript, который можно подключить к $().css().После этого я вычисляю фактический «класс наведения», используя $.extend(), чтобы расширить класс наведения до нормального класса.Таким образом, если в классе :hover не определен фон, он все равно будет иметь фон от обычного класса.

Наконец, я создаю элемент и помещаю его непосредственно под исходный элемент, избавляясь от него.из того, что заставляет CSS обрабатывать наведение, добавьте мой обычный стиль к оригиналу и мой вычисленный стиль наведения к новому элементу под ним.

Все, что нам нужно сделать после этого, это анимировать прозрачность событий мыши.Простой!

Answer 3

http://desandro.github.com/motion-emotion/ Этот проект допускает преобразования во всех основных браузерах, кроме ie7 и ie6.Он имеет прогрессивное улучшение для этих 2 браузеров

Answer 4

Я наконец-то нашел самый УЛИЧНЫЙ способ плавного перехода при наведении.Я надеюсь, что это поможет другим с той же проблемой.Мои текущие тесты показывают, что это работает на 100% для всех примеров, которые я мог придумать.Работает для гиперссылок и обычных контейнеров.

Скачать с GitHub

Этот плагин имеет 3 варианта.

• showSpeed: [число] - скорость анимации замедления
• hideSpeed: [число] - скорость анимации замедления
• includeText: [boolean] - определяет, будет ли использоваться html из элемента

Если у вас есть идеи, как оптимизировать этот плагин, свяжитесь со мной или оставьте комментарий:)

Answer 5

Это действительно грубо, но у меня есть скрипка , которая должна (теоретически) работать в браузерах и с любым изображением, которое вы хотите. Прямо сейчас это немного глупо (читай крайне), но это хорошее место для начала, и, возможно, поможет людям найти полный ответ. Кроме того, это не работает в данный момент, если вы делаете это быстро. Кнопка должна полностью исчезнуть или исчезнуть, прежде чем мышь оторвется от элемента. Как я уже сказал, хак, но для начала.

Answer 6

Итак, решение, которое я искал, это:

<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="http://ui.jquery.com/latest/ui/effects.core.js"></script>
<script>
    $(document).ready(function() {
        $("p").hover(function () {
            $(this).toggleClass("blue", 1000);
        });
    });
</script>
<style>
    p { margin: 4px; font-size:16px; font-weight:bolder; cursor:pointer; color: white; background: yellow;}
    .blue {background: blue;}
</style>
</head>
<body>
<p class="">Hover over this</p>
</body>
</html>

См. Демонстрационный пример: http://jsfiddle.net/hobobne/uRJWG/

ПРИМЕЧАНИЕ. Не работает с градиентами css3.Но все же ..