Question

我创建了一个div元素，它有一个fadein动画，内容是从另一个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的新手，任何信息都会有所帮助。谢谢。

Answer 1

我以为我会帮助分段攻击这个问题......

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

的Javascript

以下代码段允许您在单击按钮时执行冗余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标记开头。

CSS

您在IE中使用仅动画时遇到的问题很可能是由于浏览器使用的布局引擎造成的。使用Chrome和Safari等浏览器时，会使用名为Webkit的其他引擎。虽然引擎之间的功能可能大不相同，但命名约定往往保持相对类似，在大多数情况下，这可以通过添加前置头来看到; Webkit引擎-webkit-，Gecko -moz-。

例如，我添加了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>

Answer 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元素。沿着车道，如果你有多个按钮，这可能会成为一个问题。

Answer 3

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

我认为它可以简化为：

$(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中测试，因为我目前还没有它。但是在Firefox中Works great。

单击按钮时Jquery / Animation重新加载

3 个答案:

的Javascript

HTML

CSS