我希望能够淡入我的 .orbit-caption 中的某些单个元素(例如 h2 或按钮)。我已经尝试将 CSS3 应用于 .orbit-caption 和单个元素,但没有任何效果......有什么想法吗?
示例标记(应用于 .orbit-container 的淡入淡出)如下。
<section id="carousel">
<div class="row collapse">
<div class="small-12 large-12 columns">
<ul data-orbit>
<li>
<img src="image" />
<div class="orbit-caption">
<h2 class="carousel">Hunting Coolers</h2>
<h3 class="subheader">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h3>
</div>
</li>
<li>
<img src="image" />
<div class="orbit-caption">
<h2 class="carousel">Fishing Coolers</h2>
<h3 class="subheader">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h3>
</div>
</li>
</ul>
</div>
</div>
</section>
#carousel .orbit-container .orbit-slides-container > * .orbit-caption {
position: absolute;
bottom: 0;
color: #fff;
width: 100%;
padding: 10px 14px;
font-size: 0.875em;
-webkit-animation: fadein 5s;
-moz-animation: fadein 5s;
-o-animation: fadein 5s;
animation: fadein 5s;
}
最佳答案
您需要在(通常)初始化 Foundation 之前设置您的自定义样式。例如,如果这是您的自定义样式:
.the_coolest_orbit_style {
position: absolute;
bottom: 0;
color: #fff;
width: 100%;
padding: 10px 14px;
font-size: 0.875em;
-webkit-animation: fadein 5s;
-moz-animation: fadein 5s;
-o-animation: fadein 5s;
animation: fadein 5s;
}
让它工作:
$(document).foundation('orbit', {
orbit_transition_class: 'the_coolest_orbit_style'
});
$(document).foundation();
关于jquery - 在 .orbit-caption 或 .orbit-caption 中的单个元素上使用 CSS3 fadein?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15795074/