Исправлено Jquery добавлено CSS непрозрачности в UK Slideshow с Textillate - PullRequest
Новая
       10

Исправлено Jquery добавлено CSS непрозрачности в UK Slideshow с Textillate

0 голосов
/ 09 мая 2020

Я установил слайд-шоу Uikit и анимировал заголовок слайдера с помощью textillate. Однако перед началом анимации заголовка заголовок всегда отображается на короткое время при первой загрузке или на текущем слайдере, а затем исчезает и постепенно исчезает (с помощью анимации). Предполагается, что заголовок будет скрыт, а затем постепенно исчезнет. Я решил скрыть исходное отображение с помощью jquery css непрозрачности, чтобы заголовок появлялся только при запуске анимации. Я добавил класс hide ко всем слайдам, чтобы по умолчанию скрыть заголовок. 

<div id="homeslider">
    <ul class="uk-slideshow-items">
        <li>
            <img src="" alt="" uk-cover>
            <div class="uk-position-center uk-position-small">
                <h1 class="title tlt hide">Creative and powerful designs.</h2>
            </div>
        </li>
        <li>...</li>
        <li>...</li>
    </ul>
</div>

Добавил эту строку в мой css

.hide { opacity: 0;}

Затем в файл js я добавил эти: 

// Initialize Title Animation
var $titleFadeIn = $('.tlt').textillate({
    initialDelay: 0,
    in: {
        // set the effect name
        effect: 'fadeIn',
        delayScale: 1.5,
        delay: 50,
        sync: false,
        shuffle: false,
        reverse: false,
    },          
});

// Initialize slideshow
var slideimgHome = UIkit.util.$('#homeslider'); 
var $SlideImage = UIkit.slideshow(slideimgHome, {
    animation: 'scale',
    ratio: false,
});     

// Variable with element that fire event
var $slideItem = $('#homeslider ul > li');      

$slideItem.on('beforeitemshow', function(){
    $titleFadeIn.textillate('start');   
    $titleFadeIn.on('inAnimationBegin.tlt', function () {
      $('li.uk-active .hide').css("opacity", '1');
    });     
}); 
$slideItem.on('beforeitemhide', function(){
      $('li.uk-active .hide').css("opacity", '0');  
});

Код работает, но есть ошибка. После изменения слайдов в заголовке навсегда сохраняется opacity: 1; даже если слайд не является текущим. На текущем слайде класс uk-active добавлен к li.

Что я сделал не так в этом коде.

...