单击按钮时Jquery / Animation重新加载问题答案

【问题标题】：Jquery/ Animation reload when button clicked issue单击按钮时Jquery / Animation重新加载问题
【发布时间】：2014-05-13 18:46:17
【问题描述】：

我创建了一个具有淡入淡出动画的 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 的新手，任何信息都会有所帮助。谢谢。

【问题讨论】：

出于好奇：about.html 中有两个 p 元素吗？
确实如此，但我认为这可能是问题所在，所以我删除了它们。它现在只有文本没有 html 元素。我可以把它做成一个文本文档。

标签： javascript jquery html animation button

【解决方案1】：

我想我会帮助分段解决这个问题...

但是，如果您想直截了当，请查看我为此创建的 JSBin。

Javascript

以下 sn-p 将允许您在单击按钮时执行多余的 fadein 动画，而不会加倍或破坏淡入淡出逻辑。

$(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 的更改是间接的，则无需以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>

【讨论】：

【解决方案2】：

试试这个

$(document).ready(function(){
$('button').off('click');  
$('button').on('click', function(){
    var heading = $('p').clone().removeClass();
    $('p').remove();
    $('#div1').empty();
   $('#div1').append(heading);
   $('p').load("about.html").addClass('fadein_element');
});

此外，最好将事件侦听器添加到 id 或类而不是 HTML 元素。往下走，如果你有多个按钮，这可能会成为一个问题。

【讨论】：

当按钮被点击时仍然得到双倍/重复的内容。

【解决方案3】：

我敢打赌，问题与this answer 中的建议有关。 load() 会将 about.html 页面的内容放在 div 元素中。单击按钮时，$('p') 将在页面上包含 ALL p 个元素，而不仅仅是一个。这意味着所有 p 元素将随后对点击做出反应，加载更多 p 元素......不断地不断。

我认为可以简化为：

$(document).ready(function () {
  $('#button').off('click');
  $('#button').on('click', function () {
    $('#div1').empty();
    $('#div1').load("about.html");
  });
});

并将fadein_element css更改为：

.fadein_element * {
  animation: fadein ease-in 3s;
}

这将清空 div1，加载 div1 中的 about.html，并导致 div1 的所有子项淡出。原谅我，但我没有在 IE 中测试过，因为我现在没有它。 Works great 在 Firefox 中。

【讨论】：

我认为这段代码可以解决这个问题： $('p').remove(); $('#div1').empty();
我明白你现在在说什么了。也许我实现这一点的方式很糟糕。我会考虑添加一个事件监听器。