Question

我的网页中有以下几行代码 - demo/example。

HTML：

<button class="wrong-answer" onclick="showResult(this)">42</button>
<button class="right-answer" onclick="showResult(this)">43</button>

<p id="answer"></p>

JS：

function showResult(b) {
    var res = document.getElementById('answer');

    if (b.classList.contains('right-answer')) {
        res.innerHTML = '<span class="right">right</span>';
    } 

    else {
        res.innerHTML = '<span class="wrong">wrong</span>';
    }
}

当选择其中一个按钮时，如何使<span>标签显示或淡入（持续时间为2秒），显示此结果（持续时间为5秒），如果可能，再次删除它（持续时间为2秒）？

Answer 1

这是一个http://japhr.blogspot.gr/2014/02/getting-started-with-i18next-and-polymer.html。我在我的解决方案中添加了jQuery以便于编码，但是如果没有它，你可以做同样的逻辑。

HTML：

<button data-answer="wrong">42</button>
<button data-answer="right">43</button>

<p id="answer">
    <span class="wrong">wrong</span>
    <span class="right">right</span>
</p>

CSS

p#answer span {display:none;}

JS

var timeout = 0;
$('button').click(function(){
    clearTimeout(timeout);
    $('p#answer span').hide();
    $('p#answer span.' + $(this).data('answer')).fadeIn(2000);
    timeout = setTimeout(function(){$('p#answer span').fadeOut()},7000);
});

Answer 2

所以，这是另一个使用vanilla JS和CSS3的解决方案。我没有提供有关代码的不必要的细节，因为它很简单。

function showResult(b) {
  var res = document.getElementById('answer');
  if (b.classList.contains('right-answer')) {
    res.innerHTML = '<span class="right">right</span>';
  } else {
    res.innerHTML = '<span class="wrong">wrong</span>';
  }

  res.classList.remove("hidden");
  res.classList.add("visible");
  setTimeout(function() {
   res.classList.add("hidden");
  }, 5000);
}

.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 2s linear;
}
.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}

<button class="wrong-answer" onclick="showResult(this)">42</button>
<button class="right-answer" onclick="showResult(this)">43</button>
<p id="answer" class="hidden"></p>

Answer 3

您可以使用jquery执行此操作：

function showResult(b) {
    var res = document.getElementById('answer');

    if (b.classList.contains('right-answer')) {
        res.innerHTML = '<span class="right">right</span>';
        $("#answer").fadeIn(2000).fadeOut(3000);        
    } 
    else {
     res.innerHTML = '<span class="wrong">wrong</span>';
        $("#answer").fadeIn(2000).fadeOut(5000);

    }

Answer 4

这是完成同样的事情，但使用CSS类比JS / jQuery转换更多： https://jsfiddle.net/x2fgbjbq/

这个例子的关键是：

transition: opacity 2s;

我还更改了代码使用<span>的方式。这只是个人偏好 - 如果我可以帮助它，我尽量不动态添加/删除DOM元素，而只是使用已经创建的东西。

淡入淡出的JavaScript innerHTML

4 个答案: