Блог

Я работаю над каруселью, где центральное изображение должно быть полноцветным, а все остальные изображения в карусели обесцвечены.

Способ, которым я хотел добиться этого, заключался в том, чтобы иметь <img> и ненасыщенные <canvas> части этого изображения, абсолютно расположенные друг над другом в <li> . Затем, когда слайд активен, холст исчезает, открывая цветной слайд за ним. Когда активный класс удаляется из этого li, холст снова исчезает.

У меня работает ползунок jquery, добавляющий и удаляющий классы в li, и два изображения расположены просто отлично, но холст не исчезает. Я пробовал разные способы, но мои знания jquery не так велики и не дали никаких результатов. Есть предложения?

Моя разметка в основном такая:

 <ul>
    <li>
        <canvas />
        <img />
    </li>
    <li class="active">
        <canvas />
        <img />
    </li>
    <li>
        <canvas />
        <img />
    </li>
</ul>
  

Вы можете использовать .fadeOut() и .fadeIn() для затухания / затухания элементов canvas. Что-то вроде:

 $('ul').find('canvas').fadeIn().filter('.active').fadeOut();
  

Если вы хотите использовать CSS для анимированного затухания / затухания, вы можете использовать переходы CSS3 для непрозрачности, а затем установить непрозрачность для активного класса.

 canvas {
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}
.active {
    opacity: 0;
}
  

Обычно я использую Modernizr для проверки совместимости браузера пользователя с переходами CSS3.