Question

长时间听众，第一次来电。我有一个网站http://www.rivingtondesignhouse.com.php53-3.dfw1-1.websitetestlink.com/

我想让flex滑块动画下来 - 我更喜欢这种效果滑行，我的工作没有问题。问题是当滑块出现时会导致跳跃。我们怎样才能消除这种跳跃？

这是我的一些jquery

$(window).load(function () {
    $('#home-slider').css("display", "none");

    var realH = $("#home-slider").width() * 0.4;
    $("#home-slider").height(realH);
    $('#home-slider').css('display', 'block');
    $('#home-slider').css('height', 'auto');
    $('#home-slider').addClass('bump2');
    $('#home-slider').animate({
        marginTop: '-44%'
    }, 10);
    $('#home-slider').removeClass('bump2');
    $('#home-slider').animate({
        marginTop: '0'
    }, 1500, 'easeInOutExpo');
});

这是css：

#home-slider.flexslider {
    background: url("images/slider-loader.gif") no-repeat scroll 50% 50% #FFFFFF;
    height: auto;
    margin: 0;
    padding: 0;
    width: 100%;
    z-index: 1;
    position:relative;
}
.bump2 {
    position: relative !important;
    padding-bottom: 44% !important;
}

这是一些HTML

    <div id="home-slider" class="flexslider">
      <ul class="slides">

        <li>
          <img src="http://www.rivingtondesignhouse.com.php53-3.dfw1-1.websitetestlink.com/wp-content/uploads/2013/09/HOME-PAGE-WELCOME-2.jpg" />

        </li>



      </ul>
    </div>
    <!-- end slider -->

一切顺利，

BB

Answer 1

我相信你只需要将display none设置为css，而不是在jquery中准备好你的文档。

例如：

#home-slider{
     display:none;
     ...
}

这样你就不会在加载后隐藏元素 - 它应该加载隐藏然后你显示它

Jquery .animate跳跃问题

1 个答案: