在 JavaScript 函数中显示自动设置为阻止

Question

我在处理滑块属性的 JavaScript 函数中遇到问题。我有 3 张带有 class .slide 的幻灯片，每次我 "choose" 其中一张我都将其设置为 .active-slide class。问题是，如果 active-slide 的 display 属性是 table，当我设置这个 class 时，它会自动更改为 block 并且我不明白为什么。 P.s。我也在使用 bootstrap。我在这里发布与此问题相关的代码部分：

HTML:

<div class="slider">
        <div class="slide active-slide">        
            <div class="container up">
                <div class="row">
                    <div class="col-md-5 slide-text">
                        <h1 class="slide-title">whatuwant</h1>
                        <p class="slide-par">whatuwant</p>
                        <a href="#" class="slide-link">whatuwant</a>
                    </div>
                    <div class="col-md-7" id="first-slide-image">
                        <img src="whatuwant"/>
                    </div>
                </div>
            </div>
        </div>

        <div class="slide">        
            <div class="container up">
                <div class="row">
                    <div class="col-md-5 slide-text"> 
                        <h1 class="slide-title">whatuwant</h1>
                        <p class="slide-par">whatuwant</p>
                    </div>
                    <div class="col-md-7" id="second-slide-image">
                        <img src="whatuwant"/>
                    </div>
                </div>
            </div>
        </div>

        <div class="slide">        
            <div class="container up">
                <div class="row">
                    <div class="col-md-5 slide-text">
                        <h1 class="slide-title">whatuwant</h1>
                        <p class="slide-par">whatuwant</p>
                    </div>
                    <div class="col-md-7 slide-image" id="third-slide-image">
                        <img src="whatuwant"/>
                    </div>
                </div>
            </div>
        </div>
    </div>

CSS:

.container {
    width: 1024px;    
}

.up{  
    display: table-cell;
    vertical-align: middle;  
    max-width: 1024px;
    max-height: 470px;
}

.row{
    width: 1024px;
    margin: 0 auto;
    max-width: 1024px;
}

.slider {
    position: relative;
    width: 100%;
    height: 470px;
}

.slide {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.active-slide{
    display: table;   
}

JavaScript:

$(document).ready(function() {
 $('.buttonfornextslide').click(function() {
    var currentSlide = $('.active-slide');
    var nextSlide = currentSlide.next();

    if(nextSlide.length === 0) {
      nextSlide = $('.slide').first();
    }

    currentSlide.fadeOut(600).removeClass('active-slide');
    nextSlide.fadeIn(600).addClass('active-slide');
  });


  $('.buttonforpreviousslide').click(function() {
    var currentSlide = $('.active-slide');
    var prevSlide = currentSlide.prev();

    if(prevSlide.length === 0) {
      prevSlide = $('.slide').last();
    }

    currentSlide.fadeOut(600).removeClass('active-slide');
    prevSlide.fadeIn(600).addClass('active-slide');
  });
});

我尽量简化它。如果问题不明确：我怎样才能让 .active-slide 显示属性到 table?

Answer 1

jQuery 在使用 fadeIn、slideDown 等时自动为元素分配 "default" 样式。由于 div 的默认样式是 "block"，这就是应用的样式。不要使用 class "active-slide"，而是尝试专门设置 CSS

....
prevSlide.fadeIn(600).css('display','table');

参考文献：

jQuery bug

Fiddle - 你可以看到 "display" 块是 class' 样式，你必须在 fadeIn 函数之后添加它。

在fiddle中添加

.css('display','block');

和运行它，你会看到变化

在 JavaScript 函数中显示自动设置为阻止

Display automatically set to block in JavaScript function

html

javascript

css

jquery

twitter-bootstrap