gpt4 book ai didi

jQuery 不透明度动画

转载 作者:行者123 更新时间:2023-12-01 08:18:30 25 4
gpt4 key购买 nike

好吧,我的目标是让用户点击一个 div 并将另一个 div 的不透明度从 0 更改为 1,但它并没有真正发挥作用。

HTML
<div id="container">

<div id="middlebottom"><div id="portfolio">Portfolio</div></div>



</div>

<div id="portfoliocontainer"> </div>



JQUERY
$('#middlebottom').click(function() {
$('#portfoliocontainer').animate({
opacity: 1.0;
});
});


CSS
#portfoliocontainer {
height: 0%;
width: 100%;
top: 0;
position: absolute;
background-color: #FF2D2D;
opacity:0;
filter:alpha(opacity=0); }

#portfolio {
margin: 30px; }

#middlebottom {
width: 40%;
height: 30%;
background-color: #FF2D2D;
position: absolute;
left: 40%;
bottom: 0;
-webkit-transition-duration: .7s;
font-family: Helvetica, Arial, sans-serif;
font-size: 50px;
font-style: normal;
font-weight: bold;
text-transform: normal;
letter-spacing: -2px;
line-height: 1.2em;
color: #FF9898; }

我是 jQuery 的新手,所以我不太确定出了什么问题。我想我的做法是对的,但它不起作用。

最佳答案

为什么不直接使用 fadeIn() 呢?

编辑:这是我尝试过并且对我有用的代码:

<html>
<head>
<link rel="stylesheet" type="text/css" href="" />
<meta charset="utf-8" />
<title></title>
</head>

<body>
<div id="middlebottom">
Your middle bottom div
</div>

<div id="portfoliocontainer" style="display: none;">
Your Portfolio container
</div>


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$('#middlebottom').click(function(){
$('#portfoliocontainer').fadeIn();
});
</script>
</body>
</html>

关于jQuery 不透明度动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8866039/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com