无缘无故的滑动延迟 css 滑块 jquery
Slide delay for no apparent reason css slider jquery
so 根据 jsfiddle http://jsfiddle.net/greggy_coding/013481b9/19/
出于此问题的目的，重点是在第一张和第二张幻灯片切换之间......当您进入第二个过渡时，类不会立即添加到幻灯片上，它们会等待大约 1 秒钟的滑块区域......有人可以解释为什么，因为我想在幻灯片加载时立即添加类。
p.s 我正在使用来自网站另一部分的 getscript 来加载脚本......这是脚本，（滑块动画.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）到另一个页面之后的getscript。
$(".tile-area-main").css({width: "720px"}).load("what.html .slides");
$.getScript("js/slider/slider-animations.js");
所以我终于找到了解决方案：http://jsfiddle.net/ea55zpe3/
不要忘记这行：overflow: hidden; in 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">‹</label>
<label for="img-2" class="next">›</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">‹</label>
<label for="img-3" class="next">›</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">‹</label>
<label for="img-4" class="next">›</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">‹</label>
<label for="img-5" class="next">›</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">‹</label>
<label for="img-6" class="next">›</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">‹</label>
<label for="img-1" class="next">›</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");
};
});
});
如果在 addClass 语句之后将 removeClass 切换到，则不应看到以下行为 （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 更改为框），所以我添加了对transform事件的检查：
if (e.originalEvent.propertyName == 'transform') {
// do stuff
}
希望对您有所帮助。祝你好运！
相关文章：
- jquery滑块在css弹出菜单中工作
- 使用jQuery可以根据窗口大小更改滑块的css高度
- Jquery面板滑块赢得't在我将其CSS从右向左更改后关闭
- 图像滑块CSS和jQuery
- WordPress css 类会干扰滑块
- JQuery图像滑块和CSS转换只能工作一次
- CSS与Jquery、滑块、动画、灯箱..加载时间与功能
- 如何将img维度从html移动到css并保持此滑块工作
- 纯JavaScript中的Onclick滑块 - 事件不会改变CSS值
- 我迫切需要有人帮助我使我的CSS滑块自动播放
- CSS/JS 滑块与循环的问题
- IE 7，CSS 将项目悬停在 JS 滑块上
- 尝试使用CSS / Javascript实现文本滑块，遇到一些问题
- 滑入下一张柔性滑块幻灯片后，css 动画不起作用
- 如何使用CSS在光滑的滑块JS中添加自定义箭头
- 实体化css滑块不工作，显示灰色背景
- 具体化css滑块不起作用
- 如何让我的CSS滑块自动播放
- 无缘无故的滑动延迟 css 滑块 jquery
- CSS滑块分辨率问题
