logo标签列表

当点击按钮时，Jquery/动画重新加载问题

javascriptjqueryhtmlanimationbutton
3
我创建了一个 div 元素，它具有淡入动画效果，并且内容是从另一个 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，希望有相关信息可以帮助我。谢谢。

出于好奇，about.html文件中是否有两个p元素？ - Andrea
它确实有HTML元素，但我删除了它们，以为那可能是问题所在。现在它只有文本而没有HTML元素。我可以将其制作成文本文档。 - Phreak
3个回答
2
我想分段解决这个问题...
但如果你想直接进入主题，请查看我为此创建的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>

如果对

标签进行的更改是间接的，则无需从

标签开始。

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

试试这个

$(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 或 class 而不是 HTML 元素。沿途而下，如果您有多个按钮，这可能会成为一个问题。
当点击按钮时，仍然会出现重复内容/重复的情况。 - Phreak
0

我敢打赌问题与this answer中的建议有关。 load()会将about.html页面的内容放入div元素中。当单击按钮时，$('p')将包含页面上所有 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，加载about.html到div1中，并导致div1的所有子元素淡出。请原谅，我还没有在IE中测试过，因为目前不可用。在Firefox中运行良好。

我认为这段代码可以解决这个问题：$('p').remove(); $('#div1').empty(); - Phreak
我现在明白你的意思了。也许我的解决方法不好。我会考虑添加事件监听器。 - Phreak
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接