jQuery 中的不透明度变化动画不起作用
The opacity change animation in jQuery is not working
我对 jQuery 动画有疑问。我有一个元素应该:
(1) 将不透明度从0改为1,同时向下滑动
(2)然后从100%高度缩小到5px高度
什么时候鼠标在它的父级上,当鼠标离开父级时返回。
除了不透明度变化的第一个动画外,一切正常。这是为什么?我做错了什么?
这是我的代码:
var $menu_it = jQuery('.menu-item');
$menu_it.append('<span class="menu_item_bar"></span>');
$menu_it.mouseover(function(){
jQuery(this).find('.menu_item_bar').stop(true,true).animate({"opacity":"1"}, 100);
jQuery(this).find('.menu_item_bar').stop(true,true).animate({"bottom":"25px"}, 100);
jQuery(this).find('.menu_item_bar').stop(true,true).delay(100).animate({"height":"5px"}, 500);
});
$menu_it.mouseout(function(){
jQuery(this).find('.menu_item_bar').stop(true,true).animate({"height":"100%"}, 500, function(){
jQuery(this).stop(true,true).animate({"opacity":"0"}, 500);
});
jQuery(this).find('.menu_item_bar').stop(true,true).animate({"bottom":"190px"}, 750);
});
这是 jsfiddle:
https://jsfiddle.net/sg5db8y1/21/
预先感谢您的帮助。
PS 有 jQuery 而不是 $ 符号,因为我必须在 Wordpress 环境中这样做。
问题是因为您在定义每个动画时重复调用 stop(true, true)
。这意味着您要结束先前定义的动画(刚刚开始)并将其移动到最终位置。
要解决此问题,请不要在定义连续动画时调用 stop()
,或者更好的是,在同一调用中定义所有动画:
var $menu_it = $('.menu-item');
$menu_it.append('<span class="menu_item_bar"></span>');
$menu_it.mouseover(function() {
$(this).find('.menu_item_bar').stop(true, true).animate({
"opacity": "1",
"bottom": "25px",
"height": "5px"
}, 500);
});
$menu_it.mouseout(function() {
$(this).find('.menu_item_bar').stop(true, true).animate({
"height": "100%",
"opacity": "0",
"bottom": "190px"
}, 750);
});
body .menu-item {
padding: 50px 25px 0 25px;
position: relative;
display: inline-block;
}
.menu-item a {
padding-bottom: 86px;
text-decoration: none;
color: #111;
}
.menu_item_bar {
width: 100%;
position: absolute;
height: 100%;
bottom: 100px;
left: 0;
z-index: 9999;
opacity: 0;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-item">
<a href="#">Menu item 1</a>
</div>
<div class="menu-item">
<a href="#">Menu item 2</a>
</div>
<div class="menu-item">
<a href="#">Menu item 3</a>
</div>
话虽这么说,您可以仅使用 CSS 来更有效地做到这一点:
body .menu-item {
padding: 50px 25px 0 25px;
position: relative;
display: inline-block;
}
.menu-item a {
padding-bottom: 86px;
text-decoration: none;
color: #111;
}
.menu-item:hover .menu_item_bar {
opacity: 1;
height: 5px;
bottom: 25px;
}
.menu_item_bar {
width: 100%;
position: absolute;
height: 100%;
bottom: 100px;
left: 0;
z-index: 9999;
opacity: 0;
background: red;
transition: opacity 0.5s, bottom 0.5s, height 0.5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-item">
<a href="#">Menu item 1</a>
<span class="menu_item_bar"></span>
</div>
<div class="menu-item">
<a href="#">Menu item 2</a>
<span class="menu_item_bar"></span>
</div>
<div class="menu-item">
<a href="#">Menu item 3</a>
<span class="menu_item_bar"></span>
</div>
我对 jQuery 动画有疑问。我有一个元素应该:
(1) 将不透明度从0改为1,同时向下滑动
(2)然后从100%高度缩小到5px高度
什么时候鼠标在它的父级上,当鼠标离开父级时返回。
除了不透明度变化的第一个动画外,一切正常。这是为什么?我做错了什么?
这是我的代码:
var $menu_it = jQuery('.menu-item');
$menu_it.append('<span class="menu_item_bar"></span>');
$menu_it.mouseover(function(){
jQuery(this).find('.menu_item_bar').stop(true,true).animate({"opacity":"1"}, 100);
jQuery(this).find('.menu_item_bar').stop(true,true).animate({"bottom":"25px"}, 100);
jQuery(this).find('.menu_item_bar').stop(true,true).delay(100).animate({"height":"5px"}, 500);
});
$menu_it.mouseout(function(){
jQuery(this).find('.menu_item_bar').stop(true,true).animate({"height":"100%"}, 500, function(){
jQuery(this).stop(true,true).animate({"opacity":"0"}, 500);
});
jQuery(this).find('.menu_item_bar').stop(true,true).animate({"bottom":"190px"}, 750);
});
这是 jsfiddle:
https://jsfiddle.net/sg5db8y1/21/
预先感谢您的帮助。
PS 有 jQuery 而不是 $ 符号,因为我必须在 Wordpress 环境中这样做。
问题是因为您在定义每个动画时重复调用 stop(true, true)
。这意味着您要结束先前定义的动画(刚刚开始)并将其移动到最终位置。
要解决此问题,请不要在定义连续动画时调用 stop()
,或者更好的是,在同一调用中定义所有动画:
var $menu_it = $('.menu-item');
$menu_it.append('<span class="menu_item_bar"></span>');
$menu_it.mouseover(function() {
$(this).find('.menu_item_bar').stop(true, true).animate({
"opacity": "1",
"bottom": "25px",
"height": "5px"
}, 500);
});
$menu_it.mouseout(function() {
$(this).find('.menu_item_bar').stop(true, true).animate({
"height": "100%",
"opacity": "0",
"bottom": "190px"
}, 750);
});
body .menu-item {
padding: 50px 25px 0 25px;
position: relative;
display: inline-block;
}
.menu-item a {
padding-bottom: 86px;
text-decoration: none;
color: #111;
}
.menu_item_bar {
width: 100%;
position: absolute;
height: 100%;
bottom: 100px;
left: 0;
z-index: 9999;
opacity: 0;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-item">
<a href="#">Menu item 1</a>
</div>
<div class="menu-item">
<a href="#">Menu item 2</a>
</div>
<div class="menu-item">
<a href="#">Menu item 3</a>
</div>
话虽这么说,您可以仅使用 CSS 来更有效地做到这一点:
body .menu-item {
padding: 50px 25px 0 25px;
position: relative;
display: inline-block;
}
.menu-item a {
padding-bottom: 86px;
text-decoration: none;
color: #111;
}
.menu-item:hover .menu_item_bar {
opacity: 1;
height: 5px;
bottom: 25px;
}
.menu_item_bar {
width: 100%;
position: absolute;
height: 100%;
bottom: 100px;
left: 0;
z-index: 9999;
opacity: 0;
background: red;
transition: opacity 0.5s, bottom 0.5s, height 0.5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-item">
<a href="#">Menu item 1</a>
<span class="menu_item_bar"></span>
</div>
<div class="menu-item">
<a href="#">Menu item 2</a>
<span class="menu_item_bar"></span>
</div>
<div class="menu-item">
<a href="#">Menu item 3</a>
<span class="menu_item_bar"></span>
</div>