Question

我在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>

Answer 1

这是一种淡化过渡，不透明度发生变化。

Answer 2

Elegant是一个自定义函数。你必须分叉具有该库的代码。在这里你可以尝试使用jquery fadein和fadeout实现相同的效果： https://www.w3schools.com/jquery/jquery_fade.asp

var on = document.querySelectorAll(".alphStyle");    
for (var i = 0; i < on.length; i++){
    on[i].addEventListener('click', function(){
      if(this.dataset.disabled!="yes") {
        var whatLetter = this.innerHTML;
        var num = 0;
        var trueCount = 0;
        for (num = 0; num < guessWord.length; num++) {
            if (whatLetter == guessWord.charAt(num)) {
                secretW.getElementsByClassName("lineStyle")[num].innerHTML = whatLetter;
                this.style.backgroundColor = "rgb(65,208,65)";
                trueCount++;
                trueCount2++;
            } 
        }
        if (trueCount == 0) {
            mistake();
            this.style.backgroundColor = "rgb(255,100,100)";
        }
        this.dataset.disabled = "yes";
      }
    });
}

这种效应会被称为什么？

2 个答案: