CSS Image Непрозрачность Fade переходы с несколькими элементами (класс)

Question

ссылочных: http://www.sanandreasradio.com

У меня есть куча изображений в виде кнопок, и они в настоящее время есть изменение непрозрачности на: парении. Это исчезает с использованием переходов CSS (для его тестирования я настроил его только для веб-браузеров). Когда страница сначала загружается, все работает так, как ожидалось, вы можете навешивать изображение, и его непрозрачность постепенно увеличивается, а когда она теряет фокус наоборот.

Когда я нажимаю на изображение, я вызываю функцию (ниже), которая задает непрозрачность всех непрозрачных элементов изображения (класс .station-button) в нормальном режиме, а затем увеличивает непрозрачность выбранной кнопки до 1,0 (100%). Как только это произойдет, эффект зависания для других кнопок больше не работает (по какой-то причине он также не работает для выбранной кнопки). Переход по-прежнему работает при нажатии другой кнопки, но эффекты зависания полностью прекращают работу.

Способ, которым он будет работать (как сейчас, так как он не учитывает текущую кнопку, которая находится на непрозрачности 1.0), заключается в том, что ЛЮБАЯ кнопка, над которой я нависаю, должна иметь свою непрозрачность, постепенно меняющуюся до 0,6 , ДАЖЕ выбранный (который мне также нужно исправить каким-то образом).

Я долго смотрел на это, не найдя решения.

Как я могу сделать полностью фиксированную версию, где не выбранные кнопки (opacity! = 1.0) будут исчезать до непрозрачности 0.6 на: hover и fade to opacity 1.0 on: click, а выбранный в данный момент будет не влияет на: зависание?

Вот конкретные css и js.

CSS:

.station-button { 
    opacity:0.3; 
    cursor:pointer; 
    width:120px; 
    height:120px; 
    -webkit-transition:opacity .3s; 
    -webkit-transition-timing-function:ease; 
} 
.station-button:hover { 
    opacity:0.6; 
} 

JS:

function changestation(stationid) { 
    mystation = document.getElementById(stationid); 
    allofclass = document.getElementsByClassName("station-button"); 
    for (i = 0; i < allofclass.length; i++) allofclass[i].style.opacity = 0.3; 
    mystation.style.opacity = 1.0; 
    currentstation = stationid; 
    loadnext(); 
} 

Answer 1

Вы принуждая непрозрачность в JavaScript (как style атрибут img), который отменяя состояние парения.

Вместо того, чтобы заставлять непрозрачности в JavaScript, я хотел бы использовать имена классов и просто добавить или удалить их по мере необходимости, позволяя CSS разобраться непрозрачности:

function changestation(stationid) { 
    mystation = document.getElementById(stationid); 
    allofclass = document.getElementsByClassName("station-button"); 
    for (i = 0; i < allofclass.length; i++) { 
     allofclass[i].classList.remove('active'); 
    } 
    mystation.classList.add('active'); 
    currentstation = stationid; 
    loadnext(); 
} 

и

.station-button.active { 
    opacity: 1; 
} 

.station-button:hover { 
    opacity:0.6; 
} 

Вот JSfiddle с кодом изменения выше.

Обратите внимание: поскольку вы наводите указатель мыши на активный, когда вы его выбираете, он будет исчезать до 0,6 непрозрачности, а затем исчезает в 1.0, когда вы его отключаете.

Если это проблема, вы можете добавить дополнительный класс изначально, что вынуждает 1,0 непрозрачность при выборе, а затем настройте js-прослушиватель, чтобы удалить класс в первый раз, когда он не был открыт.

Кроме того, моя версия использует API-интерфейс класса HTML5, поэтому не очень хорошая поддержка: http://caniuse.com/classlist. Будет довольно легко переключить его на className, хотя для лучшей поддержки браузера.