如何使用javascript添加從左到右的動畫？

我是javascript新手。我試圖在我的代碼中添加動畫。就像，當我將鼠標懸停在一個節上時，ABC應該出現並從右向左移動，當我從節中移除鼠標時，它應該消失。我已經實現了出現消失的部分，但如何添加動畫？如果有人有任何想法，請與我分享。如何使用javascript添加從左到右的動畫？

我的代碼如下所示：

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

來源

2015-09-05 Priyank Dey

鑑於你有「jQuery的」標籤對你的問題，你看了['.animate（）'方法（HTTP：// API。 jquery.com/animate/）？ – nnnnnn

謝謝你的答案，但你可以告訴我在哪裏添加.animated（）函數。我很新。 –

檢查此[鏈接]（http://www.w3schools.com/jquery/jquery_animate.asp）。它有一個關於如何使用jQuery進行動畫製作的簡單教程。 –

使用JavaScript動畫庫如TweenJs，可替代地使用的jquery animate()方法。

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

這將動畫所有div■當#selector被點擊。

對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').on('mouseover', function(){ 
$(this).animate({ 
    visibility : "visible", 
    left : "500px" 
}); 
}); 

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

你將不得不改變，以便在上面的代碼進行動畫left屬性CSS的位置屬性的值，否則它贏得了」工作。要做到這一點，請使用以下的CSS：

#fostering { 
position : relative; 
}

來源

2015-09-05 08:00:44 Arjun

把這個動畫（）放在我的代碼中。我很新。你能提出任何建議嗎？ –

我希望鼠標懸停。是否有可能鼠標懸停，而不是點擊事件？ –

@PriyankDey寫了我的鼠標懸停代碼。 – Arjun

如何使用javascript添加從左到右的動畫？

回答

相關問題