JQuery переходы не работают должным образом

0

Я борюсь с этим уже несколько дней и все же разрешаю это. Я читал много документации и искал в самых темных углах. Есть несколько обсуждений ссылок stackoverflow, которые фактически обсуждают эту проблему, например: Greyscale Background Css Images

Короче: я пытаюсь иметь цветную версию и серая версия боковых панелей, перьев, текста и Eagle посередине. Когда вы mouseenter на любую из боковых панелей, должна быть цветная версия этих вещей. Когда вы mouseleave все становится серым. Теперь, после нескольких дней борьбы с этим, мне удалось получить два разных результата.

Версия 1. Я использовал два <div>'s для каждого изображения. Например: http://fiddle.jshell.net/zPGwY/

Версия 2. Я использовал один <div> для каждого изображения. Но не может получить тот же эффект fadeIn и fadeOut, что и версия 1. Переход немного более заметен. Кажется, что орел исчезает на мгновение, а затем цветной орел исчезает. Заметьте, что мой jQuery, вероятно, дерьмовый для этой версии, поэтому просьба идти вперед и менять его. http://fiddle.jshell.net/gB6Sx/5/

Я хочу использовать вторую версию HTML и CSS и получить переходы, как в версии 1 (более гладкой). Поэтому, когда вы mouseenter любую боковую панель, орел, перья (из одной боковой панели), текст (этой боковой панели), и эта боковая панель сама по себе становится цветной. Когда вы mouseleave все становится серым.

Очень благодарен, если кто-нибудь сможет мне помочь.

Теги:

1 ответ

0

В версии 1 вы используете только изменение между классами. В версии 2 происходит радикальное изменение анимации css.

Вы должны использовать переходы, которые работают с псевдоклассами и изменениями классов, но вам нужно использовать "переход" в вашем css.

Переходы: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

Здесь моя версия 3: http://fiddle.jshell.net/sPUR2/

EDITED: О, боже мой! Я думаю, что определенно я понял вашу проблему

первый шаг: пожалуйста, измените CSS на переходы.

второй шаг: с этим HTML: <section id="epic_home"> <div id="home_top">... <div id="home_right">... <div id="home_left">... </section>

не делайте этого: $("#epic_home").on(...);

сделайте следующее: $("#home_top").on(...); $("#home_right").on(...); $("#home_left").on(...); $("#home_top").on(...); $("#home_right").on(...); $("#home_left").on(...);

Делегируйте события на каждую боковую панель, а не в основной контейнер. Ваша версия1 работает, потому что #home_top, #home_left, #home_right имеют "position: absolute;" свойство и ваш раздел #epic_home занимают высоту 0 пикселей.

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

Поделиться
  • 0
    Ваша версия не будет работать для меня, потому что там есть эффект парения. С эффектом парения мы можем достичь двух вещей. 1. Вы наводите курсор мыши на <div id = "a">, и <div id = "a"> становится тем, что вы дали ему для свойств внутри вашего css. 2. Вы наводите курсор мыши на <div id = "a">, и ваши прямые дети становятся тем, что вы дали для свойств внутри вашего css. В моем случае я хочу, чтобы mouseenter (который почти так же, как: hover) внутри моего jQuery. Наведите курсор мыши на боковую панель и сделайте цветной орел, боковую панель, перья и текст.
  • 0
    Мужчина! Почему отрицательный голос? Мой пример требует небольших модификаций, немного JS Вам нужно, чтобы вся работа была завершена? Таким образом, вы должны нанять меня и сделать это для вас fiddle.jshell.net/sPUR2/2
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню