如何使用javascript添加从右到左的动画？

Question

我是 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>

Answer 1

使用 JavaScript 动画库，例如 TweenJs，或者使用 jquery animate()方法。

$('#selector').on('click', function(){
 $('div').animate({
  height : 500px;
 });
});

当#selector将被单击时，这将为所有div设置动画。

有关 jquery animate()方法的教程，请参见http://www.w3schools.com/jquery/eff_animate.asp 。

要在鼠标悬停时执行此操作，请使用以下命令：

$('div').on('mouseover', function(){
 $(this).animate({
  height : 500px;
 });
});

这将为鼠标悬停的 div 设置动画。

Jquery animate()方法用于为任何 CSS 动画制作动画。 因此，您可以为任何 CSS 属性设置动画。 如果您想为 CSS 的其他属性设置动画，只需将height : 500px替换为这些 CSS 规则。

为了您的目的，请使用：

（我也写了可见性部分，因为您编写的代码将无法正常工作。它会在页面加载时立即检查您的鼠标指针是否位于#fostering之上。因此删除该部分。）

$('#fostering').on('mouseover', function(){
 $(this).animate({
  visibility : "visible",
  left : "500px"
 });
});

$('#fostering').on('mouseout', function(){
 $(this).animate({
   visibility : "hidden",
   left : "-=500px"
 });
});

您必须更改 CSS 的 position 属性的值才能为上述代码中的 left 属性设置动画，否则将无法工作。 为此，请使用以下 CSS：

#fostering {
position : relative;
}

如何使用javascript添加从右到左的动画？

问题描述

1 个解决方案

解决方案1
1 2015-09-05 08:00:44

如何使用javascript添加从右到左的动画？

问题描述

1 个解决方案

解决方案1 1 2015-09-05 08:00:44

解决方案1
1 2015-09-05 08:00:44