这种效果会被称为什么？答案

【问题标题】：What would this effect be called?这种效果会被称为什么？
【发布时间】：2017-08-18 20:08:30
【问题描述】：

我在 codepen 上遇到了这种效果，我想知道你会怎么称呼它？ (Taken from here)

/* JS scripts are added see github repo for more 
https://github.com/fralec/ElegantJS */

$('#stay').elegant({
    clickNextToClose: true,
    newTab: true,
    facebook: {
        id: 'alec.vonbarnekow'
    },
    twitter: {
        id: 'fralec_'
    },
    github: {
        id: 'fralec'
    },
    website: {
        id: 'https://fralec.com'
    },
    instagram: {
        id: 'fralec__'
    }
});

body {
    background-color: #80339E;
    font-family: Verdana;
}

button {
    position: absolute;
    min-width: 200px;
    width: 30%;
    background-color: transparent;
    border: 3px solid #FFF;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 4em;
    color: #FFF;
    font-size: 20px;
    cursor: pointer;
    text-transform: uppercase;
}

<!-- head -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="//rawgit.com/fralec/elegantShareJS/master/script/elegant.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">    
<link rel="stylesheet" href="//rawgit.com/fralec/elegantShareJS/master/css/elegant.css">
<!-- body -->
<button id="stay">Stay in touch</button>

【问题讨论】：

标签： javascript html css button effect

【解决方案1】：

这是一个带有不透明度变化的淡入淡出过渡。

【讨论】：

【解决方案2】：

Elegant 是这里的自定义函数。您必须分叉具有该库的代码。在这里，您可以尝试使用 jquery 淡入和淡出来达到相同的效果： https://www.w3schools.com/jquery/jquery_fade.asp

    <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
       // $("#div1").fadeIn();
        $("#div2").fadeOut(3000);
        $("#div3").fadeIn(3000);
    });
});
</script>
</head>
<body>

<p>Demonstrate fadeIn() with different parameters.</p>

<button>Click to fade in boxes</button><br><br>

<div id="div2" style="width:80px;height:80px;display:block;background-color:red;position:absolute"></div><br>

<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;position:absolute"></div>


</body>
</html>

【讨论】：

我还没有真正学习过javascript。你能举个例子说明你会怎么做吗？
我正在尝试进行页面转换，就像在 codepen 中一样。所以当我点击按钮时，它会淡入页面，并在右上角有一个“x”返回主页。
在需要的地方放一个 x 在 div 里面。Onclick 应用类似的方法。
tru 以获得第一个转换并在此处发布 div 的代码。将尝试从那里指导您
我只是尝试进行第一次转换，但无法正常工作。无论如何你可以帮助我弄清楚如何让我链接到工作的代码笔。因为这正是我正在寻找的。 codepen.io/fralec/pen/xZBKzO