gpt4 book ai didi

jquery - 在 .orbit-caption 或 .orbit-caption 中的单个元素上使用 CSS3 fadein?

转载 作者:行者123 更新时间:2023-11-28 13:07:09 36 4
gpt4 key购买 nike

我希望能够淡入我的 .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/

36 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com