使用带有 jQuery addClass 和 removeClass 方法的过渡持续时间
Posted
技术标签:
【中文标题】使用带有 jQuery addClass 和 removeClass 方法的过渡持续时间【英文标题】:Using transition durations with jQuery addClass & removeClass methods 【发布时间】:2018-01-17 06:19:25 【问题描述】:我正在尝试让 jQuery addClass 和 removeClass 过渡具有持续时间(即,当悬停在 div 上时,高度不会立即变为 100%,大约需要 0.5 秒才能过渡)。蓝色 div 的高度延伸到父 div 的高度,文本居中对齐。
演示问题: 构建演示时遇到了一个奇怪的问题 - jQuery 函数不起作用,但在我的实际网站上起作用。不知道为什么会这样,但指出它找不到变量“hoverAwayFromWindows”或“hoverOverWindows”——但这没有意义,因为它们是函数,而不是变量。
过渡持续时间问题: 一旦父 div 悬停在上面,子 div 就会立即应用“hover-over-windows-style”类,但我希望这需要时间。通过 CSS 为子级或父级设置过渡持续时间失败。我也尝试过更改 jQuery:
$(div).removeClass('hover-over-windows-style', 500);
$(div).removeClass('hover-over-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()
函数并非旨在处理类更改。它可以为特定的个人风格变化设置动画。请参阅the documentation。
您是否尝试将过渡添加到 css(不是通过 jquery)?
我尝试将过渡持续时间添加到父子节点,但都失败了
【参考方案1】:
你需要mouseenter
,mouseleave
,从.hover-over-windows-style
中删除height
,因为它将由.animate()
设置并删除.animate() callback
中的类
function hoverOverWindows(div)
$(div).addClass('hover-over-windows-style');
$(div).animate(
height: "100%"
, 500);
function hoverAwayFromWindows(div)
$(div).animate(
height: "40%"
, 500, function()
$(div).removeClass('hover-over-windows-style');
$(div).css('height', 'auto')
);
.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%;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<article class="home-match-type home-match-type-left blitz-bg" onmouseenter="hoverOverWindows(this.children)" onmouseleave="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>
<article class="home-match-type home-match-type-left blitz-bg" onmouseenter="hoverOverWindows(this.children)" onmouseleave="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>
【讨论】:
伟大的概念。但是有没有办法让 onMouseLeave 的高度达到 div 的原始高度而不是 40%?添加“自动”不起作用40%
用于效果,结束后为原来的高度,见$(div).css('height', 'auto')
【参考方案2】:
你不能用“效果”改变元素的类。它要么有那个类,要么没有,没有之间。
但你可以使用 CSS 过渡来制作动画:
$(function()
$('.btn-set').click(function(e)
e.preventDefault();
$('.box').addClass('set');
);
$('.btn-rm').click(function(e)
e.preventDefault();
$('.box').removeClass('set');
);
);
.box
width: 50px;
height: 50px;
margin-top: 25px;
background-color: blue;
transition: all 0.5s ease; /* <-- look here */
.box.set
background-color: red;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn-set">set color</button>
<button class="btn-rm">remove color</button>
<div class="box"></div>
或使用 jQuery animate,但您还需要 jQuery UI:
$(function()
$('.btn-set').click(function(e)
e.preventDefault();
$('.box').animate(
backgroundColor: "red" // <-- look here
, 500);
);
$('.btn-rm').click(function(e)
e.preventDefault();
$('.box').animate(
backgroundColor: "blue" // <-- look here
, 500);
);
);
.box
width: 50px;
height: 50px;
margin-top: 25px;
background-color: blue;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<button class="btn-set">set color</button>
<button class="btn-rm">remove color</button>
<div class="box"></div>
【讨论】:
我无法真正检查解决方案,因为演示错误仍然存在。在jsfiddle.net/2m4cu5Lk 我已经应用了动画方法,但是错误意味着我看不到它是否有效 您需要 jQuery UI,因为单独的 jQuery 无法为颜色设置动画。当你使用onmouseover
属性时,函数应该在<body>
中加载,在jsFiddle你可以这样设置:prntscr.com/g6bc8n然后你会发现它工作。查看更新后的jsFiddle:jsfiddle.net/2m4cu5Lk/5以上是关于使用带有 jQuery addClass 和 removeClass 方法的过渡持续时间的主要内容,如果未能解决你的问题,请参考以下文章
带有 jQuery 的 themoviedb JSON API
带有 jQuery 的 Python JSON RPC - ServiceRequestNotTranslatable