单击按钮时淡出图像，更改图像URL，然后淡入。如何实现？
[英]Fade Out an Image when click on button, change image url and then fade in. How to do it?
问题描述
I am creating a website and I need some help with an issue. 
我正在创建一个网站，我需要一些问题的帮助。 I will upload a picture for you to understand it better. 我将上传一张图片，供您更好地理解。
I have a big image in the middle, and below it there are some words that act like links(). 我在中间有一幅大图，在它的下面有一些像links（）一样的单词。 I need this to happen: 1. The big image appears as the website loads. 我需要这样做：1.网站加载时出现大图。 2. When I click on a button (the words acting as links), I want the big image to fade out, then change the image src (so a different image will be displayed in the big image container) and then this different image will appear fading in. 2.当我单击一个按钮（用作链接的单词）时，我希望大图像逐渐淡出，然后更改图像src（以便在大图像容器中显示不同的图像），然后该不同的图像将出现在淡入。
It's something like this: 就像这样：
I've already tried to get this by using some jQuery, but I don't get it to work. 我已经尝试通过使用一些jQuery来实现此目的，但是我没有使其工作。 I thought it would be something like this, but it's not working, as the image src changes, then the image appears, and after that the image fades out, leaving an empty space instead of the image: 我以为会是这样，但由于图像src更改，所以图像不起作用，然后图像出现，此后图像淡出，留下了空白而不是图像：
$('.button3').on({
'click': function(){
$("#change-image").fadeOut("slow");
$('#change-image').attr('src','img/project3.jpg');
$("#change-image").fadeIn("slow");
}
});
$('.button4').on({
'click': function(){
$("#change-image").fadeOut("slow");
$('#change-image').attr('src','img/project4.jpg');
$("#change-image").fadeIn("slow");
}
});
etc.
Can anybody help me solving this? 有人可以帮我解决这个问题吗？ I know how to fade out, how to change image src, and how to fade in, but I can't do all together as I would like. 我知道如何淡出，如何更改图像src以及如何淡入，但是我无法像我想的那样一起做所有事情。
Thank you very much!! 非常感谢你！！
3 个解决方案
解决方案1
2 已采纳 2019-04-24 09:20:47
fadeOut takes a second parameter, a function. fadeOut需要第二个参数，一个函数。 You can then do what you need to do after the first image is faded out. 在第一张图像淡出之后，您可以执行所需的操作。
$('.button3').on({ 'click': function(){ $("#change-image").fadeOut("slow", function() { $('#change-image').attr('src', 'https://images.freeimages.com/images/large-previews/d2f/tulips-1400882.jpg'); $("#change-image").fadeIn("slow"); }); } });
img { height : 150px; width : 200px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <img id="change-image" src="https://images.freeimages.com/images/large-previews/c98/ferns-3-1405636.jpg"/> <br/><button class="button3">Click</button>
解决方案2
0 2019-04-24 09:17:16
I suggest you use animate.css( https://daneden.github.io/animate.css/ ) so you can just manaipute this by just adding class or removing class. 我建议您使用animate.css（ https://daneden.github.io/animate.css/ ），这样就可以通过添加类或删除类来实现此目的。
npm i animate.css
Make sure #change-image has this class "animated" 确保＃change-image此类具有“动画”类
$('.button3').on({
'click': function(){
$("#change-image").addClass('fadeOut');
// let keep a time out, so that it will give us a little delay to see the effect of fadeOut before fadeIn happens
setTimeout(() => {
$('#change-image').attr('src','img/project3.jpg');
$("#change-image").removeClass('fadeOut').addClass('fadeIn');// remove the first class...else it will have the two class fadeOut and fadeIn...
}, 1000);
}
});
解决方案3
0 2019-04-24 09:29:05
$('.button3').on({ 'click': function(){ $("#change-image") .fadeOut(3000, function() { $('#change-image').attr('src','https://images.freeimages.com/images/large-previews/c98/ferns-3-1405636.jpg'); }) .fadeIn(3000); } }); $('.button4').on({ 'click': function(){ $("#change-image") .fadeOut(3000, function() { $('#change-image').attr('src','https://images.freeimages.com/images/large-previews/d2f/tulips-1400882.jpg'); }) .fadeIn(3000); } });
<!DOCTYPE html> <html> <head> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <img id="change-image" src="https://images.freeimages.com/images/large-previews/d2f/tulips-1400882.jpg" width="500" height="333"> <button class="button3">Button1</button> <button class="button4">Button2</button> </body> </html>
Try the below code..Replace the image src after fadeout. 尝试下面的代码。淡出后替换图像src。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<img id="change-image" src="https://images.freeimages.com/images/large-previews/d2f/tulips-1400882.jpg" width="500" height="333">
<button class="button3">Button1</button>
<button class="button4">Button2</button>
<script>
$('.button3').on({
'click': function(){
$("#change-image")
.fadeOut(3000, function() {
$('#change-image').attr('src','https://images.freeimages.com/images/large-previews/c98/ferns-3-1405636.jpg');
})
.fadeIn(3000);
}
});
$('.button4').on({
'click': function(){
$("#change-image")
.fadeOut(3000, function() {
$('#change-image').attr('src','https://images.freeimages.com/images/large-previews/d2f/tulips-1400882.jpg');
})
.fadeIn(3000);
}
});
</script>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.