单击元素后隐藏它

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>

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>

Answer 2

您可以使用 jQuery fadeOut 检查下面的工作文件：

使用jQuery

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>fadeOut demo</title>
  <style>
    .hide {
      font-size: 150%;
      cursor: pointer;
      text-align: center;
    }
    
    h1 {
      text-align: center;
    }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>

<body>

  <div class="hide">
    <h1>A</h1>
    <p>
      If you click on this paragraph you'll see it just fade away.
    </p>
  </div>
  <script>
    $(".hide").click(function() {
      $(".hide").fadeOut("slow");
    });
  </script>

</body>

</html>

使用JavaScript

function fadeOutEffect() {
  var fadeTarget = document.getElementById("hide");
  var fadeEffect = setInterval(function() {
    if (!fadeTarget.style.opacity) {
      fadeTarget.style.opacity = 1;
    }
    if (fadeTarget.style.opacity > 0) {
      fadeTarget.style.opacity -= 0.1;
    } else {
      clearInterval(fadeEffect);
    }
  }, 200);
}

document.getElementById("hide").addEventListener('click', fadeOutEffect);

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>fadeOut demo</title>
  <style>
    #hide {
      font-size: 150%;
      cursor: pointer;
      text-align: center;
    }
    
    h1 {
      text-align: center;
    }
  </style>
</head>

<body>

  <div id="hide">
    <h1>A</h1>
    <p>
      If you click on this paragraph you'll see it just fade away.
    </p>
  </div>

</body>

</html>

Answer 3

你想要的只是一个隐藏视图的动画。

您可以使用 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 获得如此美丽的效果。您可以在下面查看示例代码。

   <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#btn1").click(function(){
                $("#box").animate({opacity: 0});
            });
            $("#btn2").click(function(){
                $("#box").animate({opacity: 1});
            });
        });
    </script>

    </head>
    <body>
        <button id="btn1">Animate</button>
        <button id="btn2">Reset</button>
        <div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;"></div>
    </body>

Answer 4

您可以使用 jQuery fadeOut() 效果轻松实现此目的。以下是 w3scool 参考资料：

https://www.w3schools.com/jquery/eff_fadeout.asp

点击"try it yourself>"按钮，您可以根据需要修改代码。

这是另一个适用于您的示例：

https://jsfiddle.net/kag4jqyh/

Answer 5

这是原版答案 JavaScript（不使用 jQuery）

HTML

<a href="#" id="foo" class="foo">Text</a>
<br />
<button id="hide-button" onclick="hideButton()">Hide</button>
<button id="show-button" onclick="showButton()">Show</button>

JavaScript

const hideButton = () => {
    document.getElementById("foo").classList.add('hidden');
}

const showButton = () => {
    document.getElementById("foo").classList.remove('hidden');
}

CSS

 .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;
}

Answer 6

如果您想使用 JavaScript 而不是使用 jQuery。然后 试试这个

/******define time-delay only in s(seconds)****/
    var timeSlot = '.3s';
     function hide(obj){
        obj.style.visibility= 'hidden';
        obj.style.opacity= 0.8;
        obj.style.transition= 'visibility 0s linear'+timeSlot+', opacity '+timeSlot+' linear';
    }

.div1 {
          font-size: 1.2rem;
          cursor: pointer;
          text-align: center;
          margin-top:-100px;
       }
.logo {
         font-size: 10rem;
      }

<div class="div1" onclick="hide(this);">
    <h1 class="logo">A</h1>                 
 </div>

单击元素后隐藏它

Hide an element after clicking on it

html

javascript

css

animation

hide