Javascript/CSS - 在没有出现的图像中淡入淡出?

标签 javascript jquery html css fadein

当我的网页加载时,我希望有链接。单击所有链接后,我希望图像在页面底部淡入(图像显示“完成”,这基本上意味着用户已完成单击所有链接)。我首先在网页加载时隐藏图像,就像这样;

<html>
    <body>
        <!-- links which need to be clicked go here -->
        <img id='complete' src='../images/complete.png' alt='' />
    </body>
</html>

<style>
    #complete {
        visibility: hidden;
    }
</style>

<script>
    // once all links are clicked
    $('#complete').fadeIn();
</script>

使用这段代码,#complete 不会淡入(可能是因为可见性设置为隐藏)。我尝试在淡入命令之前将可见性设置为可见,但仍然没有使它淡入。我还尝试制作 css

#complete {
    filter: alpha(opacity = 0);
}

和脚本

$('#complete').fadeTo('slow', '100');

那是行不通的,#complete 只是出现得非常快,而不是慢慢消失。 我正在使用 IE8 和 CSS,知道如何解决这个问题吗?

最佳答案

在 CSS 上

#complete {
display: none;
}

在 javascript 上

$('#complete').fadeIn();

并尝试使用最新的 jquery

<body>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
</body>

查看实际效果:http://jsfiddle.net/KUqJL/你的问题就是我说的关于 css 的问题

关于Javascript/CSS - 在没有出现的图像中淡入淡出?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21027435/

相关文章:

javascript - 如何从 JSON 字符串中提取值列表并迭代它们?

javascript - 在加载时进行 jquery keyup 计算的最有效方法

javascript - 如何获取数组中所有出现的相同值的索引?

javascript - 循环中的按钮,单击仅触发第一个按钮

html - 2 div 在另一个 "container"div - 适应宽度

javascript - 内容安全策略 : The page's settings blocked the loading of a resource

javascript - 将 Picker 绑定(bind)到 React Native 中的 Picker.Item 列表

c# - 当母版页已经声明了 Jquery 时将 Jquery 添加到 aspx 页面

javascript - 如何从一个或多个选项卡重置一个变量的值?

javascript - 当alert()被删除时,代码表现得很奇怪