если элемент имеет активный класс, fadeOut дочернее изображение - PullRequest
Новая
       8

если элемент имеет активный класс, fadeOut дочернее изображение

0 голосов
/ 07 октября 2011

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

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

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

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

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

1 Ответ

1 голос
/ 07 октября 2011

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

$('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.

...