长期倾听者,第一次来电者。我有一个网站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