8

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

JS：

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

除了动画中的淡入淡出之外，这工作正常。我究竟做错了什么。我尝试将两个语句合并为一个语句，并且我还尝试在 display:block 之前设置淡入，但它根本不显示。对 JS 来说还是相当新的，所以我只是想弄清楚什么是可能的。提前致谢

4

4 回答 4

4

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>

然后遵循获取 DOM 元素和调用方法的API 规则。

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

于 2013-05-31T15:18:26.470 回答
4

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

使用此 HTML：

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

这种风格：

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

从样式中删除显示属性。

之后你可以使用 JavaScript 来改变样式，效果会自动发生：

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

演示：http: //jsfiddle.net/AUak7/

于 2013-05-31T15:23:22.550 回答
2

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

演示

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();
于 2013-05-31T15:36:15.583 回答
0

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

$("#next").fadeIn(1000);
于 2013-05-31T15:19:14.413 回答