在jquery中单击锚链接时图像淡入淡出动画
我对 jquery 完全陌生，我没有找到我想要的东西，所以我自己写了它。目标是在单击上面的链接时创建图像淡入淡出动画（从图像 A 到图像 B）。
不管怎样，它的行为不是我想要的，除非......快速/随机点击时它不够平滑。您能就此说几句话吗？谢谢你！
这是正在运行的示例：
CSS：
...
.overlappingImage {position:absolute; left:0; top:0; display:none}
...
代码：
...
<script type="text/javascript">
function FadeToImage(event, to_image_name, speed) {
if (event != null)
event.preventDefault();
var currentImgWrapper = $("#dummy");
var currentImg = currentImgWrapper.find('img');
if (currentImg != null) currentImg.removeClass("overlappingImage");
var newImgHTML = '<div id="dummy">' + '<img id="to_upper_image" src="' + to_image_name + '" class="overlappingImage"/>' + '</div>';
if (currentImgWrapper.html() == null)
$("#d").html(newImgHTML);
else $("#d").html(currentImgWrapper.html() + newImgHTML);
currentImgWrapper.fadeOut(speed);
$("#to_upper_image").fadeIn(speed);
$("#to_upper_image").removeAttr('id');
}
$(document).ready(function() {
FadeToImage(null, 'img/1.JPG', 0);
$('a').first().click(function(event) {
FadeToImage(event, 'img/2.JPG', 1000);
});
$('a').last().click(function(event) {
FadeToImage(event, 'img/3.JPG', 1000);
});
});
</script>
</head>
<body>
<a href="#">CLICK 1</a> <a href="#">CLICK 2</a>
<div id="d" style="position: relative; margin: 50px">
</div>
</body>
.. 。
I'm totally new to jquery and I didn't find exactly what I wanted so I've written it by myself. The goal is to create an image fading animations (from image A to image B) when the link above is clicked.
Anyways, its behavior is not what I would except .. it isn't smooth enough when clicking quickly / randomly. Could you please say a word about it? Thank you!
THIS IS THE RUNNING EXAMPLE:
CSS:
...
.overlappingImage {position:absolute; left:0; top:0; display:none}
...
The code:
...
<script type="text/javascript">
function FadeToImage(event, to_image_name, speed) {
if (event != null)
event.preventDefault();
var currentImgWrapper = $("#dummy");
var currentImg = currentImgWrapper.find('img');
if (currentImg != null) currentImg.removeClass("overlappingImage");
var newImgHTML = '<div id="dummy">' + '<img id="to_upper_image" src="' + to_image_name + '" class="overlappingImage"/>' + '</div>';
if (currentImgWrapper.html() == null)
$("#d").html(newImgHTML);
else $("#d").html(currentImgWrapper.html() + newImgHTML);
currentImgWrapper.fadeOut(speed);
$("#to_upper_image").fadeIn(speed);
$("#to_upper_image").removeAttr('id');
}
$(document).ready(function() {
FadeToImage(null, 'img/1.JPG', 0);
$('a').first().click(function(event) {
FadeToImage(event, 'img/2.JPG', 1000);
});
$('a').last().click(function(event) {
FadeToImage(event, 'img/3.JPG', 1000);
});
});
</script>
</head>
<body>
<a href="#">CLICK 1</a> <a href="#">CLICK 2</a>
<div id="d" style="position: relative; margin: 50px">
</div>
</body>
...
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
为了使动画更流畅，您应该只在每次完成后执行后续的淡入淡出：
To make the animation smoother, you should only execute subsequent fades after each one is finished: