jQuery 动画帮助
我想做的事情像这个坏例子，我通过CSS3尝试过但是要更改图片的字段，至少我用 jQuery 制作了所有内容，但没有动画或有问题，实际上我不知道，这是我的 CSS3 尝试。
这是我的代码
#maged{
width:198px; /*140px * 5*/
height:591px;
background-color:#0C9;
position: absolute;
overflow:hidden;
top: 14px;
left: 41px;
position: relative;
overflow: hidden;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
opacity:1;
filter:alpha(opacity=100);
}
#maged:hover {
opacity:0;
filter:alpha(opacity=0);
-moz-transform: scale(1.00) rotate(0deg) translate(0px, 100px) skew(0deg, 0deg);
-webkit-transform: scale(1.00) rotate(0deg) translate(0px, 100px) skew(0deg, 0deg);
transform: scale(1.00) rotate(0deg) translate(0px, 100px) skew(0deg, 0deg); transform-origin: 0% 0%
background-color:#36F;
}
#cc_item img{
position:absolute;
width:195px;
height:591px;
top:-562px;
left:54px;
}
#cc_title{
color:#fff;
line-height:46px;
font-size:30px;
top:472px;
left:59px;
position:absolute;
background:#272727;
width:167px;
display:block;
z-index:11;
}
-->
</style>
<script type="text/javascript">
$(function(evt) {
$("#maged").click(function() {
alert("loool");
$("#cc_item").slideDown("slow");
$("#cc_title").fadeIn("slow");
return false;
});
});
</script>
</head>
<body>
<div id="maged"></div>
<div id="cc_title">Main page</div>
<div id="cc_item" style="z-index:5;">
<img src="img30000.jpg" alt="" />
</div>
</body>
</html>
What I want to do something like this bad example, I tried by CSS3 but field to change the picture, at least I made everything in jQuery, but no animation or something wrong, actually I don't know, here is my Attempt BY CSS3.
Here is my code
#maged{
width:198px; /*140px * 5*/
height:591px;
background-color:#0C9;
position: absolute;
overflow:hidden;
top: 14px;
left: 41px;
position: relative;
overflow: hidden;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
opacity:1;
filter:alpha(opacity=100);
}
#maged:hover {
opacity:0;
filter:alpha(opacity=0);
-moz-transform: scale(1.00) rotate(0deg) translate(0px, 100px) skew(0deg, 0deg);
-webkit-transform: scale(1.00) rotate(0deg) translate(0px, 100px) skew(0deg, 0deg);
transform: scale(1.00) rotate(0deg) translate(0px, 100px) skew(0deg, 0deg); transform-origin: 0% 0%
background-color:#36F;
}
#cc_item img{
position:absolute;
width:195px;
height:591px;
top:-562px;
left:54px;
}
#cc_title{
color:#fff;
line-height:46px;
font-size:30px;
top:472px;
left:59px;
position:absolute;
background:#272727;
width:167px;
display:block;
z-index:11;
}
-->
</style>
<script type="text/javascript">
$(function(evt) {
$("#maged").click(function() {
alert("loool");
$("#cc_item").slideDown("slow");
$("#cc_title").fadeIn("slow");
return false;
});
});
</script>
</head>
<body>
<div id="maged"></div>
<div id="cc_title">Main page</div>
<div id="cc_item" style="z-index:5;">
<img src="img30000.jpg" alt="" />
</div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
这个解决方案的 CSS 量很大，因为我想专注于使 HTML 更干净，并确保在 JavaScript 关闭时总体效果有效（尽管程度较轻）。
据我所知，CSS3 本身并不存在，尽管 CSS 可能看起来很先进。 （不是！）
对我来说最重要的一点是这些图像实际上并不内容，所以我认为您不需要为它们使用
![]()
This solution is very CSS heavy, as I wanted to focus on making the HTML cleaner and making sure the general effect worked (though to a lesser degree) when JavaScript is off.
To my knowledge, there's no CSS3 per se, though the CSS may seem advanced. (it's not!)
The most important point for me what that those images really aren't content so I don't think you need to use
<img>elements for them; instead use CSS background images... but to animate those background images easily I did have to use a jQuery plugin.这是我在不使用 css3 的情况下解决您的问题的方法。一切都在 1.html 文件中，jquery 和图像都指向外部源，因此您可以运行它。希望这可以帮助你:)
Heres my solution to your problem without using css3. It´s all in the 1.html file, jquery and images are poiting to external sources, so you can just run it. Hope this can help you :)