滑塊jquery類沒有被應用，直到太晚

Question

所以簡單地把...簡單的滑塊你使用右箭頭去下一張幻燈片，它應該立即應用一個名爲bounceInUp類...... 它這樣做，但直到約1秒後，所以你有靜態文本，那麼效果，我只是想從幻燈片開始的文字效果， ...似乎沒有什麼糾正問題...

我認爲它可能涉及到transitionend並沒有真正結束，直到下一張幻燈片，所以想到也許是按鈕本身onclick事件，但我不知道該怎麼做...

無論如何這裏是一個jsfiddle enter link description here

，這裏是jQuery的，（都包括在小提琴）

主要jQuery代碼

$(document).ready(function() { 
    //Store a ref to slides 
    var $slides = $(".slides"); 

    //Bind event to the contianed that gets animated 
    $(".slide-container") 
    .on("transitionend webkitTransitionEnd oTransitionEnd msTransitionEnd", function(e){ 

     // Remove classes from all the elements within the active container that starts with the class 'add-anim' 
     $slides.find(".slide-container [class^='add-anin']").removeClass("animated bounceInUp"); 

     //Add appropriate classes to the matched elements within the active container 
     var $radio = $slides.find(":radio[name='radio-btn']:checked"); 
     $radio.next(".slide-container").find(".add-anim-up").addClass("animated bounceInUp"); 
     $radio.next(".slide-container").find(".add-anim-up-late").addClass("animated bounceInUp"); 
     $radio.next(".slide-container").find(".add-anim-left").addClass("animated bounceInLeft"); 
    }); 
}); 

Answer 1

按鈕點擊事件就是它在。

你需要按照你想要的樣式來設計它，但我認爲它可以做到你想要的。

小提琴：http://jsfiddle.net/3hr4ua79/

$(document).ready(function() { 
 
    $('.sp').first().addClass('active'); 
 
    $('.sp').hide(); 
 
    $('.active').show(); 
 

 
    $('#button-next').click(function() { 
 

 
    $('.active').removeClass('active animated bounceInUp').addClass('oldActive'); 
 
    if ($('.oldActive').is(':last-child')) { 
 
     $('.sp').first().addClass('active animated bounceInUp'); 
 
    } else { 
 
     $('.oldActive').next().addClass('active animated bounceInUp'); 
 
    } 
 
    $('.oldActive').removeClass('oldActive'); 
 
    $('.sp').fadeOut(); 
 
    $('.active').fadeIn(); 
 
    }); 
 

 
    $('#button-previous').click(function() { 
 
    $('.active').removeClass('active animated bounceInUp').addClass('oldActive'); 
 
    if ($('.oldActive').is(':first-child')) { 
 
     $('.sp').last().addClass('active animated bounceInUp'); 
 
    } else { 
 
     $('.oldActive').prev().addClass('active animated bounceInUp'); 
 
    } 
 
    $('.oldActive').removeClass('oldActive'); 
 
    $('.sp').fadeOut(); 
 
    $('.active').fadeIn(); 
 
    }); 
 
});

#slider-wrapper { 
 
    width: 100%; 
 
    height: 200px; 
 
} 
 
#slider { 
 
    width: 100%; 
 
    height: 200px; 
 
    position: relative; 
 
} 
 
.sp { 
 
    width: 100%; 
 
    height: 200px; 
 
    position: absolute; 
 
} 
 
#nav { 
 
    margin-top: 20px; 
 
    width: 100%; 
 
} 
 
#button-previous { 
 
    position: relative; 
 
    top: -100px; 
 
} 
 
#button-next { 
 
    position: relative; 
 
    top: -100px; 
 
    float: right; 
 
} 
 
body { 
 
    overflow: hidden; 
 
} 
 
.animated { 
 
    -webkit-animation-duration: 1s; 
 
    animation-duration: 1s; 
 
    -webkit-animation-fill-mode: both; 
 
    animation-fill-mode: both; 
 
} 
 
@-webkit-keyframes bounceInUp { 
 
    0%, 60%, 75%, 90%, 100% { 
 
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
 
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
 
    } 
 
    0% { 
 
    opacity: 0; 
 
    -webkit-transform: translate3d(0, 3000px, 0); 
 
    transform: translate3d(0, 3000px, 0); 
 
    } 
 
    60% { 
 
    opacity: 1; 
 
    -webkit-transform: translate3d(0, -20px, 0); 
 
    transform: translate3d(0, -20px, 0); 
 
    } 
 
    75% { 
 
    -webkit-transform: translate3d(0, 10px, 0); 
 
    transform: translate3d(0, 10px, 0); 
 
    } 
 
    90% { 
 
    -webkit-transform: translate3d(0, -5px, 0); 
 
    transform: translate3d(0, -5px, 0); 
 
    } 
 
    100% { 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
    transform: translate3d(0, 0, 0); 
 
    } 
 
} 
 
@keyframes bounceInUp { 
 
    0%, 60%, 75%, 90%, 100% { 
 
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
 
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
 
    } 
 
    0% { 
 
    opacity: 0; 
 
    -webkit-transform: translate3d(0, 3000px, 0); 
 
    transform: translate3d(0, 3000px, 0); 
 
    } 
 
    60% { 
 
    opacity: 1; 
 
    -webkit-transform: translate3d(0, -20px, 0); 
 
    transform: translate3d(0, -20px, 0); 
 
    } 
 
    75% { 
 
    -webkit-transform: translate3d(0, 10px, 0); 
 
    transform: translate3d(0, 10px, 0); 
 
    } 
 
    90% { 
 
    -webkit-transform: translate3d(0, -5px, 0); 
 
    transform: translate3d(0, -5px, 0); 
 
    } 
 
    100% { 
 
    -webkit-transform: translate3d(0, 0, 0); 
 
    transform: translate3d(0, 0, 0); 
 
    } 
 
} 
 
.bounceInUp { 
 
    -webkit-animation-name: bounceInUp; 
 
    animation-name: bounceInUp; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="slider-wrapper"> 
 
    <div id="slider"> 
 
    <div class="sp" style="background: blue;">akjdfalfkdj</div> 
 
    <div class="sp" style="background: yellow;">akjdfautlfkdkjkhkj</div> 
 
    <div class="sp" style="background: green;">akjdfalfkdiyukjkhkj</div> 
 
    <div class="sp" style="background: red;">akjdfalfkdkkljjkhkj</div> 
 
    </div> 
 
</div> 
 
<div id="nav"></div> 
 
<input type="button" id="button-previous" value="Previous"> 
 
<input type="button" id="button-next" value="Next">