javascript - 单击后隐藏元素

Question

去做 ：

• 单击后平滑隐藏元素，例如在此页面中https://www.alphafx.co.uk/ ，当您单击字母A时，它会平滑消失
• 仅使用 HTML、CSS、JavaScript 即可实现此效果？

    var foo = document.getElementById('foo');

document.getElementById('hide-button').onclick = function () {
    foo.className = 'hidden';
};

document.getElementById('show-button').onclick = function () {
    foo.className = '';
};

       #foo {
    transition-property: visibility, opacity;
    transition-duration: 0s, 1s;
}

#foo.hidden {
    opacity: 0;
    visibility: hidden;
    transition-property: opacity, visibility;
    transition-duration: 1s, 0s;
    transition-delay: 0s, 1s;
}

<a href="#" id="foo">Text</a>
<button id="hide-button">Hide</button>
<button id="show-button">Show</button>

标签： javascripthtmlcssanimationhide

Answer 1

请试试这个：

$(function() {
    $('#spantext').on('click', function() {
      // $(this).hide();

      $(this).fadeOut("slow"); // if you want to hide it slow
        
    });

    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="spantext">this is a text</span>