Question

Todo：

单击元素后就可以平滑地隐藏元素，就像在页面https://www.alphafx.co.uk/中一样，单击字母A时它会平滑消失
仅使用HTML，CSS，JavaScript实现这种效果吗？

string

(defun list-duplicates (LIST) "
Returns `nil' when LIST has no duplicates.
Otherise, returns a `list' of `cons's.
In each list element:
- the `car' is the element of LIST which has duplicates.
- the `cdr' is a list of the positions where the duplicates are found."
   (interactive)
   ;; res1 = result
   ;; unique1 = LIST with duplicates removed
   (let ((unique1 (remove-duplicates LIST :test #'string-equal))
     (res1 '()))
     (if (eq LIST unique1)
     nil
       (progn
     (dolist (x unique1)
       ;; i = incrementor
       ;; pos1 = list of postions of duplicates
       (let (y (i 0) (pos1 '()))
         (while (member x LIST)
           (set 'y (seq-position LIST x))
           (when (> i 0)
         (push y pos1))
           (set 'i (+ 1 i))
           (set 'LIST
            (substitute (concat x "1") x LIST :test #'string-equal :count 1)))
         (push (cons x (nreverse pos1)) res1)))
     (nreverse res1)))))

(list-duplicates '("a" "b" "c")) ; nil
(list-duplicates '("a" "b" "b" "a" "b" "c" "c")) ; (("a" 3) ("b" 2 4) ("c" 6))

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

点击“亲自尝试”按钮，然后您可以根据需要修改代码。

这是另一个适合您的示例：

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>

单击后隐藏元素

6 个答案: