jQuery background-image “fade in” animation

2019-08-11 18:13发布

Could somebody please help me? I have a site with an image set as background to the "body" element. I need to create an effect like "fade in".

This is the site http://www.ladycup.eu/.

If you zoom out, you can see the leaves on the side of the main content box. That is the image and I need it to "grow" from under the content box if you know what I mean. I have read much advice on this topic - like creating a div with this image in the background, etc. but in this case I can't do that. I would be really grateful for any help...

标签： jquery image animation background

1条回答

狗以群分

2楼-- · 2019-08-11 19:01

I've checked the site, but I couldn't see the background of the body, anyway, If I got your question, you want the background image of the body to fade out and grow above the content, if so,

Using CSS3, define a class and call it what ever you want, let's call it ani

.ani {
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

and in you HTML code add this class to the body <body class="ani">

Last thing, add the background to the body, and on load change the opacity

<script>
$(document).ready(function(){
   $('#Body').css('opacity', 0.1);
});
</script>

0人赞添加讨论(0) 举报

jQuery background-image “fade in” animation

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间