我创建了一个 div 元素,它具有淡入动画效果,并且内容是从另一个 html 页面加载的。我希望每次单击按钮时都重新加载动画。
问题:单击按钮后,从加载的 html 页面中生成的内容会再次出现并且每次单击按钮时都会重复。目前我的代码只在 IE 中起作用。
我尝试在单击按钮时清空 div 内容,但似乎没有起作用。
附注:加载的 html 页面只有文本内容。
以下是 html 代码。
问题:单击按钮后,从加载的 html 页面中生成的内容会再次出现并且每次单击按钮时都会重复。目前我的代码只在 IE 中起作用。
我尝试在单击按钮时清空 div 内容,但似乎没有起作用。
附注:加载的 html 页面只有文本内容。
以下是 html 代码。
<button>Hit</button>
<div id="div1">
<p class="fadein_element"></p>
</div>
我的Javascript代码:
$(document).ready(function(){
$('button').on('click', function(){
var heading = $('p').clone().removeClass();
$('p').remove();
$('#div1').empty();
$('#div1').append(heading);
$('p').load("about.html").addClass('fadein_element');
});
如果需要的话,这是我的CSS:
.fadein_element {
animation: fadein ease-in 3s; }
@keyframes fadein {
from { opacity:0; }
to { opacity:1; }
}
我刚接触JS/jquery,希望有相关信息可以帮助我。谢谢。