Question

所以我有两个带有类书签 - 容器和幻灯片的div，这里是html：

<div class="bookmark-container">
    <h2 class="message"></h2>

    <div class="container c1">
        <a href="http://www.google.com" class="link"><img src="images/google.png" class="bookmark" /></a>
        <div class="b1-hover">
        <a href="http://www.google.com/mail"><img src="images/mail.png" class="sublink" /></a>
        <a href="http://www.google.com/drive"><img src="images/drive.png" class="sublink" /></a>
        <a href="http://www.google.com/images"><img src="images/image.png" class="sublink" /></a>
        <a href="http://www.google.com/calendar"><img src="images/calendar.png" class="sublink" /></a>
        </div>
    </div>

    <div class="container c2">
        <a href="http://www.reddit.com" class="link"><img src="images/reddit.png" class="bookmark" /></a>
        <div class="b2-hover">
        <a href="http://www.reddit.com/r/leagueoflegends"><img src="images/league.png" class="sublink" /></a>
        <a href="http://www.reddit.com/r/funny"><img src="images/funny.png" class="sublink rfun" /></a>
        </div>
    </div>

    <div class="container c3">
        <a href="http://www.cokeandpopcorn.ch/tvsection.php" class="link"><img src="images/play.png" class="bookmark play" /></a>
        <div class="b2-hover">
        <a href="http://www.cokeandpopcorn.ch/free-watch-marvels-agent-of-shield-online.php"><img src="images/shield.png" class="sublink" /></a>
        <a href="http://www.cokeandpopcorn.ch/free-watch-arrow-online.php"><img src="images/arrow.png" class="sublink" /></a>
        <a href="http://www.cokeandpopcorn.ch/free-watch-the-flash-online.php"><img src="images/flash.png" class="sublink" /></a>
        <a href="http://www.cokeandpopcorn.ch/free-watch-modern-family-online.php"><img src="images/modern.png" class="sublink" /></a>
        </div>
    </div>

    <p class="time"></p>
</div>

<div class="slide">
</div>

这是css：

.bookmark-container {
background-color:rgba(40, 40, 40, .8);
height:55vh;
margin-top:22.5vh;
margin-bottom:22.5vh;
width:60vw;
float:left;
border-top-right-radius:25px;
border-bottom-right-radius:25px;
display:none;
}

.slide {
-webkit-transition: background-color .25s ease-in-out;
-moz-transition: background-color .25s ease-in-out;
-o-transition: background-color .25s ease-in-out;
transition: background-color .25s ease-in-out;
background-color:rgba(40, 40, 40, .8);
margin-top:22.5vh;
margin-bottom:22.5vh;
height:55vh;
width:2vw;
float:left;
margin-left:2vw;
cursor:pointer;
border-radius:50px;
}

.slide:hover {
-webkit-transition: background-color .25s ease-in-out;
-moz-transition: background-color .25s ease-in-out;
-o-transition: background-color .25s ease-in-out;
transition: background-color .25s ease-in-out;
background-color:rgba(80, 80, 80, .8);
}

首次加载页面时的图像：

http://prntscr.com/5qfmlt

点击幻灯片后的图片：

http://prntscr.com/5qfmxq

问题：

所以基本上在动画播放的前几次，这种跳跃非常烦人。在第一次或第二次跳跃后消失。我已经尝试过缩小图像文件大小以及预加载它们，但这似乎没有用。

的Javascript / Jquery的：

$('.slide').click(function () {
$(this).hide();
$('.bookmark-container').toggle("slide", { direction: "left"}, 500);
window.setTimeout(function (){$('.slide').fadeIn(); }, 500);
});

我也尝试过更改动画时间。

从左到右切换首次使用时跳转

0 个答案: