我是 JavaScript 新手。我正在尝试在我的代码中添加动画。比如，当我将鼠标悬停在某个部分上时，ABC 应该出现并从右向左移动，当我从该部分移开鼠标时，它应该消失。 我已经实现了出现消失部分，但如何添加动画？如果有人有任何想法，请与我分享。
我的代码如下:
<head>
<script src="/assets/bootstrap.min.js"></script>
<script type="text/javascript">
window.onload=hide_fostering;
function show_fostering()
{
document.getElementById('fostering').style.visibility="visible";
}
function hide_fostering()
{
document.getElementById('fostering').style.visibility="hidden";
}
</script>
</head>
<html>
<body>
<section onMouseOver="show_fostering()" onMouseOut="hide_fostering()">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<h1><strong>CONNECTING</strong></h1>
</div>
</div>
<div class="col-sm-6">
<div class="row pad-top4" id="fostering">
<h3>ABC</h3>
</div>
</div>
</div>
</section>
</body>
</html>
最佳答案
使用 JavaScript 动画库，例如 TweenJs，或者使用 jquery animate() 方法。
$('#selector').on('click', function(){
$('div').animate({
height : 500px;
});
});
当单击 #selector 时，这将为所有 div 提供动画效果。
参见http://www.w3schools.com/jquery/eff_animate.asp有关 jqueryanimate() 方法的教程。
要在鼠标悬停时执行此操作，请使用以下命令:
$('div').on('mouseover', function(){
$(this).animate({
height : 500px;
});
});
这将为鼠标悬停的 div 制作动画。
Jquery
animate()method is used to animate any CSS animation. So you can animate any CSS property. If you want to animate other properties of CSS, then just replaceheight : 500pxwith those CSS rules.
为了您的目的，请使用此:
(我也写了可见性部分，因为你写的代码将无法正常工作。它会在页面加载时立即检查你的鼠标指针是否在#fostering之上。所以删除该部分。)
$('#fostering').on('mouseover', function(){
$(this).animate({
visibility : "visible",
left : "500px"
});
});
$('#fostering').on('mouseout', function(){
$(this).animate({
visibility : "hidden",
left : "-=500px"
});
});
You will have to change the value of position property of CSS in order to animate left property in the above code, otherwise it won't work. To do this, use the following CSS :
#fostering {
position : relative;
}
关于javascript - 如何使用javascript添加从右到左的动画？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32410795/