Question

我有一个脚本，在按下单选按钮时显示一个元素。我试图淡化元素的显示，所以它不是那么突然。

JS：

document.getElementById('next').style.display = 'block';
document.getElementById('next').fadeIn(1000);

除了动画中的淡入淡出外，此功能正常。我究竟做错了什么。我尝试将两个语句组合成一个语句，我也尝试在display：block之前设置淡入淡出，但它根本没有出现。对JS来说还是比较新的，所以我只想弄清楚什么是可能的。提前致谢

Answer 1

您可以使用CSS3来开发此效果。

使用此HTML：

<div id='fader'></div>

和这种风格：

#fader {
   opacity:0;
   -webkit-transition: opacity 2s;
   -moz-transition: opacity 2s;
   -o-transition: opacity 2s;
   transition: opacity 2s;
}

从样式中删除display属性。

之后你可以用JavaScript来改变风格，效果会自动发生：

document.getElementById('fader').style.opacity = 1;

DEMO： http://jsfiddle.net/AUak7/

Answer 2

DOM元素上没有.fadeIn()方法。

document.getElementById('ques_2').fadeIn(1000);

您可能会看到一些jQuery或其他库代码。该代码必须在包装DOM元素的jQuery（或其他）对象上运行。

另一种适用于现代浏览器的方法是使用CSS3过渡。您可以让JavaScript应用一个新类，让CSS处理视觉效果。

如果您确实想使用像jQuery这样的库，则需要将其导入到您的页面中。例如，将其放在您网页的head中：

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

然后按照API rules获取DOM元素并调用方法。

您可以使用本机DOM方法进行提取，也可以只使用jQuery，如果您决定加载它，这是有意义的。

Answer 3

使用简单的javascript你可以做这样的事情...... 在这里我也打印不透明度值，因为它正在增加......

<强> DEMO

function show() {
    document.getElementById('next').style.opacity = (parseFloat(document.getElementById('next').style.opacity) + 0.1);
    document.getElementById('value').innerHTML = (document.getElementById('next').style.opacity);
    if (document.getElementById('next').style.opacity < 1) {
        setTimeout(show, 400);
    }
}

function fadeIn() {

    document.getElementById('next').style.opacity = 0;
    document.getElementById('next').style.display = 'block';
    setTimeout(show, 400);
}

fadeIn();

Answer 4

FadeIn是一个jQuery函数，但你使用的是简单的javascript。包含jQuery并使用：

$("#next").fadeIn(1000);

从display：none到display：block时，使用Javascript淡入元素

4 个答案: