我创建了一个 div 元素，它有一个淡入淡出的动画，内容是从另一个 html 页面加载的。我希望每次单击按钮时重新加载动画。
问题:单击按钮后，加载的 html 页面中的内容会再次生成，并且每次单击按钮时都会加倍。 到目前为止，我的代码只能在 IE 中运行。
我试图在单击按钮时清空 div 内容，但这似乎不起作用。
p.s 加载的 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 的新手，任何信息都会有所帮助。 谢谢。
最佳答案
我想我会帮助分段解决这个问题......
但如果您想切入正题，请查看 JSBin我为此创建的。
Javascript
以下代码片段将允许您在单击按钮时执行冗余的淡入 动画，而不会加倍或破坏淡入淡出逻辑。
$(document).ready(function () {
$('#load').click(function () {
$('.container')
.html('')
.append("<p></p>")
.children().addClass('fadein_element')
.load('/about.html');
});
});
值得注意的是，为了范围和清晰度的目的，您不应在将事件附加到标记这样低的级别上处理具有如此特定功能的事件。使用 class、id 或关系标签来清理。
HTML
根据上述内容——我建议进行细微的更改，例如以下内容。
<button id="load" type="button">Load</button>
<div class="container"></div>
如果对它所做的更改是间接的，则无需以 p 标记开头。
CSS
您看到的动画仅在 IE 中工作的问题很可能是由于您的浏览器使用的布局引擎造成的。对于 Chrome 和 Safari 等浏览器，不同的引擎称为 Webkit用来。尽管引擎之间的功能可能有很大差异，但命名约定往往保持相对相似，在大多数情况下，这是通过添加前置标题看到的； -webkit- 用于 Webkit 引擎，-moz- 用于 Gecko .
例如，我添加了 Chrome(和 Safari)所需的兼容样式。
.fadein_element {
animation: fadein ease-in 3s;
/* Webkit (Chrome/Safari) Compat. */
-webkit-animation: fadein ease-in 3s;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Webkit (Chrome/Safari) Compat. */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
虽然我不喜欢使用内联样式，但下面是一个一体化的工作示例。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.fadein_element {
animation: fadein ease-in 3s;
/* Webkit (Chrome/Safari) Compat. */
-webkit-animation: fadein ease-in 3s;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Webkit (Chrome/Safari) Compat. */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#load').click(function () {
$('.container')
.html('')
.append("<p id='loadcontainer'></p>")
.children().addClass('fadein_element')
.load('/about.html');
});
});
</script>
</head>
<body>
<button id="load" type="button">Load</button>
<div class="container"></div>
</body>
</html>
关于javascript - 单击按钮时 Jquery/Animation 重新加载问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23639235/