Question

我是Javascript的新手（以及一般的编码）。我一直在通过w3schools尝试学习一些关于Javascript的知识。我一直在尝试构建一个带有悬停效果的按钮，该按钮会在点击时删除文本，并在再次单击时将其拉回。我试图把它放在我的一个页面上，所以我可以有一些搜索引擎优化的文本而不会让它陷入困境。到目前为止，我已经找到了如何切换文本，但没有任何运气与实际按钮或下拉效果。任何帮助或建议将不胜感激。

<script language="javascript"> 
function toggle() {
    var ele = document.getElementById("toggleText");
    var text = document.getElementById("displayText");
    if(ele.style.display == "block") {
            ele.style.display = "none";
        text.innerHTML = "Show Text";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "HIDE TEXT";
    }
} 
</script>

显示文字

文字在这里

Answer 1

动画效果有两个主要选项 - CSS过渡效果或用JavaScript编码的内容。

CSS过渡：

您可以向CSS添加过渡，这样，如果元素的数字属性发生变化（例如高度，不透明度），浏览器将为其设置动画，以便例如将高度从0px更改为10px并将过渡时间设置为1秒后，0.1秒后将变为1px，0.2秒后变为2px等。您可以在此处阅读实现CSS过渡的具体内容：http://www.w3schools.com/css3/css3_transitions.asp

<强>的JavaScript

您可以编写自己的自定义函数，但如果您在生活中执行多个动画，那么学习使用自定义JavaScript库（如jQuery）可能会更加节省时间。您上面写的整个函数可以重写为$('#ele').slideToggle();

与您的具体问题无关，上面提到的方法对于搜索引擎优化无关紧要，因为Google不会看到您使用JavaScript添加的文字 - 而且据我所知，谷歌可能也不太喜欢隐藏文字。< / p>

带滚动条的Javascript下拉按钮

1 个答案: