Bootstrap Carousel - 动画和边距问题

Posted 2023-03-06

【中文标题】Bootstrap Carousel - 动画和边距问题

【英文标题】：Bootstrap Carousel - issues with animation and margin

【发布时间】：2015-01-27 22:12:55

【问题描述】：

我正在使用 Bootstrap 3.2.0。在 2.3.2 版本上一切正常，但在更新到 3.2.0 后，我的轮播开始出现异常。

我注意到两个问题：

动画不工作（文本应该像代码中一样从顶部平滑移动） margin-top 在第一个 .item 上是好的（元素在中间）但在最后两个 .items 它更接近 div 的底部

我的代码在这里：http://jsfiddle.net/crvfn2nL/2/

JS

jQuery(function($) 

    //#main-slider
    $(function()
        $('#image-slider.carousel').carousel(
            interval: 8000
        );
    );

    $( '.centered' ).each(function( e ) 
        $(this).css('margin-top',  ($('.item').height() - $(this).height())/2);
    );

    $(window).resize(function()
        $( '.centered' ).each(function( e ) 
            $(this).css('margin-top',  ($('.item').height() - $(this).height())/2);
        );
    );
);

CSS

 #image-slider #carousel, #image-slider #carousel .carousel-inner 
    width:100%;
    margin:0 auto;
    text-align:center;
    min-height:100%;


#image-slider #carousel, #image-slider #carousel .carousel-inner .item 
width:100%;
height:100%;
min-height:100%;
 background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  height:400px;


.item-nr-1 
    background:url('http://ibin.co/1iuR0HvTp3aU');


.item-nr-2 
    background:url('http://ibin.co/1iuRE1en7Wdm');


.item-nr-3 
    background:url('http://ibin.co/1iuRPP1uYfye');


#image-slider #carousel h2 
  font-size: 36px;



#image-slider .carousel .carousel-inner .active .animation.animated-item-1 
  -webkit-animation: fadeInUp 300ms linear 300ms both;
  -moz-animation: fadeInUp 300ms linear 300ms both;
  -o-animation: fadeInUp 300ms linear 300ms both;
  -ms-animation: fadeInUp 300ms linear 300ms both;
  animation: fadeInUp 300ms linear 300ms both;

#image-slider .carousel .carousel-inner .active .animation.animated-item-2 
  -webkit-animation: fadeInUp 300ms linear 600ms both;
  -moz-animation: fadeInUp 300ms linear 600ms both;
  -o-animation: fadeInUp 300ms linear 600ms both;
  -ms-animation: fadeInUp 300ms linear 600ms both;
  animation: fadeInUp 300ms linear 600ms both;

#image-slider .carousel .carousel-inner .active .animation.animated-item-3 
  -webkit-animation: fadeInUp 300ms linear 900ms both;
  -moz-animation: fadeInUp 300ms linear 900ms both;
  -o-animation: fadeInUp 300ms linear 900ms both;
  -ms-animation: fadeInUp 300ms linear 900ms both;
  animation: fadeInUp 300ms linear 900ms both;

#image-slider .carousel .carousel-inner .active .animation.animated-item-4 
  -webkit-animation: fadeInUp 300ms linear 1200ms both;
  -moz-animation: fadeInUp 300ms linear 1200ms both;
  -o-animation: fadeInUp 300ms linear 1200ms both;
  -ms-animation: fadeInUp 300ms linear 1200ms both;
  animation: fadeInUp 300ms linear 1200ms both;


#image-slider 
    margin-top:80px;    

为什么会这样？

谢谢

【参考方案1】：

试试这个...

	$( '.centered' ).each(function( e ) 
		$(this).css('margin-top',  ($('.item').height())/2-$('.centered').height()/1.5);
	);

	$(window).resize(function()
		$( '.centered' ).each(function( e ) 
			$(this).css('margin-top',  ($('.item').height())/2-$('.centered').height()/1.5);
		);
	);

之前的 margin-top 值随着轮播中的图像而变化。 不要将两个高度的减法除以 2，而是用不同的值分别除。 希望这会有所帮助。