0

長年のリスナー、初めての発信者。私はサイトhttp://www.rivingtondesignhouse.com.php53-3.dfw1-1.websitetestlink.com/を持っています

フレックススライダーを下にアニメーションさせたい - 問題なく動作するようになったスライドダウンよりも、この効果の方が好きです。問題は、スライダーが表示されたときにジャンプが発生することです。このジャンプをどのように削除できますか?

これが私の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

4

1 に答える 1

0

jqueryでドキュメントを準備するのではなく、cssにdisplay noneを設定するだけでよいと思います。

例えば：

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

このようにして、ロード後に要素を非表示にすることはありません-非表示でロードしてから表示する必要があります

于 2013-10-15T16:50:32.427 に答える