jQuery 中的不透明度更改动画不起作用
Posted
技术标签:
【中文标题】jQuery 中的不透明度更改动画不起作用【英文标题】:The opacity change animation in jQuery is not working 【发布时间】:2019-02-06 12:34:42 【问题描述】:我对 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 环境中执行此操作。
【问题讨论】:
在fiddle
代码中正常工作
一切正常,除了动画开始时没有类似淡入淡出的效果:/
【参考方案1】:
问题是因为您在定义每个动画时反复调用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>
【讨论】:
谢谢您,先生,您的回答非常有帮助。在这个例子中使用纯 CSS 会好很多。我还问,因为我以后必须使用 scrollTop 做类似的动画,这不能仅使用 CSS 获得。无论如何,再次感谢您的热心帮助! 另外请注意,您仍然可以通过在滚动时在元素上添加/删除类来使用 CSS 动画,而不是使用性能不佳的 JS 动画。以上是关于jQuery 中的不透明度更改动画不起作用的主要内容,如果未能解决你的问题,请参考以下文章