我试图让jQuery addClass & removeClass转换有一个持续时间(即当悬停在div上,而不是立即100%的高度,大约需要0.5s过渡)。蓝色div的高度延伸到父div的高度,并且文本居中对齐。使用jQuery的转换时间addClass&removeClass方法
演示问题: 构建演示有一个奇怪的问题 - jQuery函数不起作用,但在我的实际网站上。不知道为什么这是,但表明它不能找到变量'hoverAwayFromWindows'或'hoverOverWindows' - 但这是没有意义的,因为它们是函数,而不是变量。
TRANSITION DURATION问题: 只要父div被鼠标悬停,子div就会立即应用类'悬停窗口式',但我希望这需要时间。通过CSS设置转换持续时间给孩子或父母失败。我也试过改变jQuery:
$(div).removeClass('hover-over-windows-style',500); ('hover-windows-style',500ms) ; $(div).addClass('hover-over-windows-style')。animate(transition-duration:0.5s,500);
$(div).animate('hover-over-windows-style',500);
有人可以帮助解释我哪里错了吗?
function hoverOverWindows(div) {
$(div).addClass('hover-over-windows-style');
};
function hoverAwayFromWindows(div) {
$(div).removeClass('hover-over-windows-style');
};
.home-match-type {
width: 47%;
height: 300px;
margin-top: 50px;
float: left;
position: relative;
overflow: hidden;
}
.home-match-type-left { margin-right: 3% }
.img-text-container {
width: auto;
height: auto;
bottom: 0;
position: absolute;
padding: 15px;
background: rgba(60, 122, 173, 0.95);
}
.img-text-container-type-2 { background: rgba(60, 122, 173, 0.95) }
h3.img-text.img-header { float: left }
h3.img-text.img-header.be-central { float: none }
.img-text {
text-align: left;
margin: 0;
display: inline-block;
}
.img-header {
padding-bottom: 5px;
text-transform: uppercase;
border-bottom: 1px solid rgba(213, 213, 213, 0.3);
}
h3.home-featured-windows, h3.home-featured-windows a, h2.match-type-windows, h2.match-type-windows a, .match-contents a, h2.img-header-left a, h2.product-title a, .home a {
font-weight: 300;
color: #333;
}
h3.img-text.img-header.be-central { float: none }
.windows-type-2 { color: #333 }
h3.windows-type-2 a {
font-weight: 300;
color: #333;
float: right;
}
.hover-over-windows-style {
height: 100%; /* Could set to 300px */
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
.blitz-bg {
background:red;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="assets/css/lib/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<article class="home-match-type home-match-type-left blitz-bg" onmouseover="hoverOverWindows(this.children)" onmouseout="hoverAwayFromWindows(this.children)">
<div class="img-text-container img-text-container-type-2">
<h3 class="img-text img-header be-central windows-type-2"><a href="matches/blitz.html">Header 3</a></h3>
<p class="img-text text-align-centre windows-type-2">Some text goes here;.Some text goes here;.Some text goes here;.Some text goes here;.Some text goes here;..</p>
</div>
</article>
的'jQuery.animate()'函数是不是设计来处理类的变化。它可以动画特定的个人风格变化。请参阅[文档](http://api.jquery.com/animate/)。 – Phylogenesis
你有没有尝试向css中添加转换(而不是通过jquery)? –
我试图给父母和孩子添加过渡时间,并且都失败 – user3760941