滑动延迟无明显原因css滑块jquery

Question

按照jsfiddle http://jsfiddle.net/greggy_coding/013481b9/19/

出于这个问题的目的，焦点在第一次和第二次幻灯片转换之间......当你进入第二次转换时，不会立即在幻灯片上添加类，他们会等待大约1秒的滑块area ...有人可以解释为什么我想在幻灯片加载时立即添加类。

p.s我正在使用来自网站其他部分的getscript来加载脚本......这是脚本，（slider-animation.js）..

$(function() {
    var $slides = $(".slides");
    $slides.first().addClass("new-class");
    $(".slide-container")
    .on("transitionend webkitTransitionEnd oTransitionEnd msTransitionEnd", function(e){
        // do something here
        $slides.find(".slide-container [class^='add-anim']").removeClass("animat fadeInUpBig bounceInUp");
        var $radio = $slides.find(":radio[name='radio-btn']:checked");

这是在将滑块（.slides）加载到另一页后刚刚获取的脚本....

$(".tile-area-main").css({width: "720px"}).load("what.html .slides");
      $.getScript("js/slider/slider-animations.js");

Answer 1

所以我终于找到了解决方案：http://jsfiddle.net/ea55zpe3/

不要忘记overflow: hidden;中的行body，这样可以摆脱出现的滚动条。

<强> HTML

<div class="tile-area-main" id="tam-content">
<ul class="slides animated bounceInUp">
    <input type="radio" name="radio-btn" id="img-1" checked />
    <li class="slide-container">
        <div class="slideM">
            <p class="add-anim-up">thisis an area for some text</p>
            <p class="add-anim-left">Thisthis is another text area</p>
        </div>
        <div class="nav">
            <label for="img-6" class="prev">&#x2039;</label>
            <label for="img-2" class="next">&#x203a;</label>
        </div>
    </li>
    <input type="radio" name="radio-btn" id="img-2" />
    <li class="slide-container">
        <div class="slideM">
            <p class="add-anim-up">some more text to have some classes added to</p>
            <p class="add-anim-up">some more text with something to do</p>
        </div>
        <div class="nav">
            <label for="img-1" class="prev">&#x2039;</label>
            <label for="img-3" class="next">&#x203a;</label>
        </div>
    </li>
    <input type="radio" name="radio-btn" id="img-3" />
    <li class="slide-container">
        <div class="slideM">
            <div id="referrals" class="add-anim-up">
                <div id="company-title">
                     <h2>Referrals</h2>

                </div>
                <p class="add-anim-up">herapist or speech and language therapist) referrals are accepted, music therapy is unfortunately not currently available on the NHS. Schools are able tssions. If you have any questions or enquiries about musitate to contact us. (contact icon)</p>
            </div>
            <div id="local-links" class="add-anim-up">
                <div id="company-title">
                     <h2>Local Links</h2>

                </div>
                <br/>
                <p class="add-anim-left">MusAbility are always interested in networking and making local links with other businesses, charities and organisations in the North-West. Please send us a message to tell us about yourselves or to arrange to meet for a coffee and a chat (other beverages are accepted!) If you are interested in building a more formal partnership or co-promoting, please get in touch.</p>
            </div>
        </div>
        <div class="nav">
            <label for="img-2" class="prev">&#x2039;</label>
            <label for="img-4" class="next">&#x203a;</label>
        </div>
    </li>
    <input type="radio" name="radio-btn" id="img-4" />
    <li class="slide-container">
        <div class="slideM">
            <img src="http://farm9.staticflickr.com/8061/8237246833_54d8fa37f0_z.jpg" />
        </div>
        <div class="nav">
            <label for="img-3" class="prev">&#x2039;</label>
            <label for="img-5" class="next">&#x203a;</label>
        </div>
    </li>
    <input type="radio" name="radio-btn" id="img-5" />
    <li class="slide-container">
        <div class="slideM">
            <img src="http://farm9.staticflickr.com/8055/8098750623_66292a35c0_z.jpg" />
        </div>
        <div class="nav">
            <label for="img-4" class="prev">&#x2039;</label>
            <label for="img-6" class="next">&#x203a;</label>
        </div>
    </li>
    <input type="radio" name="radio-btn" id="img-6" />
    <li class="slide-container">
        <div class="slideM">
            <img src="http://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg" />
        </div>
        <div class="nav">
            <label for="img-5" class="prev">&#x2039;</label>
            <label for="img-1" class="next">&#x203a;</label>
        </div>
    </li>
</ul>

<强> CSS

body {
    background-color:#000;
    overflow:hidden;
}
.metro .tile-area-main {
    position: fixed;
    left: 290px;
    top: 150px;
    display: inline-block;
    color: #ffffff;
    cursor: pointer;
    width: 780px;
    height: 450px;
    overflow: hidden;
    z-index : 3000;
}
.metro .tile-area-main p {
    margin: 0;
    padding: 0 2.4em 0.6em;
    font-size: 1.2em;
    line-height: 1.5;
    color : #fff;
    cursor: pointer;
}
.slides {
    padding: 0;
    width: 609px;
    height: 420px;
    display: block;
    margin: 0 auto;
    position: relative;
}
.slides * {
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.slides input {
    display: none;
}
.slide-container {
    display: block;
}
.slideM {
    top: 0;
    opacity: 0;
    width: 609px;
    height: 420px;
    display: block;
    position: absolute;
    transform: scale(0);
    transition: all .7s ease-in-out;
}
.slideM img {
    width: 100%;
    height: 100%;
}
.slideM p {
    color: #fff;
    font-size : 22px;
}
.nav {
    z-index:9999;
    top:0;
}
.nav .prev {
    margin-left:-80px
}
.nav .next {
    right: -80px;
}
.nav label {
    width: 100px;
    height: 100%;
    display: none;
    position: absolute;
    opacity: 1;
    z-index: 9999;
    cursor: pointer;
    transition: opacity .2s;
    color: #FFF;
    font-size: 56pt;
    text-align: center;
    line-height: 20px;
    font-family:"Varela Round", sans-serif;
    text-shadow: 0px 0px 15px rgb(119, 119, 119);
}
.slideM:hover + .nav label {
    opacity: 0.5;
}
.nav label:hover {
    opacity: 1;
}
input:checked + .slide-container .slideM {
    opacity: 1;
    transform: scale(1);
    transition: opacity 1s ease-in-out;
}
input:checked + .slide-container .nav label {
    display: block;
}
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes fadeInUpBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 1000px, 0);
        transform: translate3d(0, 1000px, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes fadeInUpBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 1000px, 0);
        transform: translate3d(0, 1000px, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
.fadeInUpBig {
    -webkit-animation-name: fadeInUpBig;
    animation-name: fadeInUpBig;
    opacity: 0.3;
    background-color: rgba(0, 0, 0, 0.3);
}
.new-class .slideM {
    border: 2px solid red;
}

<强> JS

$(function () {
    var $slides = $(".slides");
    $slides.first().addClass("new-class");
    $(".add-anim-up").addClass("animated fadeInUpBig bounceInUp");
    $(".add-anim-left").addClass("animated fadeInUpBig bounceInUp");
    $(".nav").on("click", function () {
        $(".add-anim-up").removeClass("animated fadeInUpBig bounceInUp");
        $(".add-anim-left").removeClass("animated fadeInUpBig bounceInUp");
        if ($(".add-anim-up").css('opacity') == '1') {
            $(".add-anim-up").addClass("animated fadeInUpBig bounceInUp");
            $(".add-anim-left").addClass("animated fadeInUpBig bounceInUp");

        };
    });
});

Answer 2

如果将removeClass切换到addClass语句之后，则不应该看到此行为（http://jsfiddle.net/013481b9/25/）：

var $radio = $slides.find(":radio[name='radio-btn']:checked");

$radio.next(".slide-container").find(".add-anim-up").addClass("animated fadeInUpBig");

$radio.next(".slide-container").find(".add-anim-left").addClass("animated fadeInUpBig");

$slides.find(".slide-container [class^='add-anim']").removeClass("animated fadeInUpBig bounceInUp");

您看到的暂停/闪烁是在添加下一个动画之前删除的类。

我注意到的另一件事（但是没有导致这种特定行为）是transitionend事件被多次运行（对于每个更改css更改为框），所以我添加了对{的检查{1}}事件：

transform

希望这有帮助。祝你好运！