在加载时添加淡出效果

Add fade in effect on onload

本文关键字：淡出 添加 加载      更新时间：2023-09-26

我如何为这个特定的代码添加淡入?我想让图片在加载时淡入画面。我对Stackoverflow做了一些研究，但没有发现任何有用的东西。如果你能帮助我，我会很感激的。

<script type="text/javascript">
window.onload = function(){
       var img = document.getElementById('img')
       if(img.clientHeight<$('#div').height()){
            img.style.height=$('#div').height()+"px";
       }
       if(img.clientWidth<$('#div').width()){
            img.style.width=$('#div').width()+"px";
       } 
}
</script>

附加问题:是否可以在此代码中添加load-function ?

您尝试做的事情可以使用jQuery简化。jQuery是一个JavaScript库，它使处理HTML文档变得更加容易。

这里是一个小提琴演示他们的fadeIn方法:http://jsfiddle.net/zgRtd/3/

只是为了确保你清楚发生了什么:

我们声明了一个名为load Image的函数-这个函数使用jQuery将fadeIn方法附加到我们的jQuery对象(通过CSS选择器引用)。

图片设置为:none;最初. 

function loadImage () {
    $('#your-image').fadeIn('slow', function () {
        // Animation complete
    });
}

我们在加载文档后调用该函数(这可以绑定到任何事件)，我在JSFiddle示例中将其注释掉了。

$(document).on('ready', function () {
    loadImage();
});
相关文章：