JQuery Animate函数实现透明度和位置渐变的实例

最新推荐文章于 2025-04-19 00:15:00 发布

北方的刀郎

最新推荐文章于 2025-04-19 00:15:00 发布

阅读量5.8k

点赞数

分类专栏： jquery学习

本文链接：https://blog.csdn.net/forest_fire/article/details/50944774

版权

jquery学习专栏收录该内容

69 篇文章

订阅专栏

求JQuery Animate函数实现透明度和位置渐变的实例

2010-06-12 11:04 花开花落花无意分类：JavaScript | 浏览 3967 次

要html代码和脚本代码都有..

然后实现一张图片渐渐透明并向上移动的效果..

谁能帮帮忙吗谢谢了..

<html>
<head>
<title>Untitled</title>

</head>

<body>
 <div id="d" style="margin-top:200px;width:100px;height:100px;background-color:red"></div>
</body>
<script type="text/javascript" src="jquery_min.js"></script>
<script type="text/javascript">
$(function (){
 $("#d").animate({opacity:"0",marginTop:"0"},6000);
});
</script>
</html>

.category{ width:334px; height:334px; background:url(../images/cate_pic.jpg) no-repeat; float:left; position:relative;}

.news .nr .title,.category .nr .title{background:url(../images/whit_line.gif) left bottom no-repeat; color:#FFFFFF;}

.news .nr,.category .nr{ width:100%; height:100%; position:absolute; z-index:1; top:0; background:#035fad;filter:alpha(Opacity=0);-moz-opacity:0;opacity: 0;}

.news .nr ul,.category .nr ul{ padding-left:30px; }

.news .nr a,.category .nr a{ color:#FFFFFF;padding-left:15px; background:url(../images/icon.png) left center no-repeat; line-height:35px; height:35px;}

.news .nr a:hover,.category .nr a:hover{ color:#DEF664;background:url(../images/hover_icon.png) left center no-repeat;}

.category .title,.yanfa .title,.news .title{ background:url(../images/block_line.gif) no-repeat left bottom; height:56px; line-height:56px; margin:0px 0px 18px 20px; padding-top:20px;}

.category .title h3,.yanfa .title h3,.news .title h3{ font-size:20px; line-height:20px; padding-top:10px;}

.category .title p,.yanfa .title p,.news .title p{ font-size:12px; line-height:20px;}

<div class="title"><h3>产品分类</h3><p>Product category</p></div>

<div class="title"><h3>产品分类</h3><p>Product category</p></div>

<ul>