单击按钮时淡出图像，更改图像 url 然后淡入。如何做？

Question

我正在创建一个网站，需要一些帮助来解决问题。我会上传一张图片让你更好地理解它。

中间有一个大图片，下面是一些类似links()的文字。我需要这样发生： 1. 网站加载时出现大图。 2. 当我点击一个按钮（作为链接的文字）时，我希望大图像淡出，然后更改图像 src（这样一个不同的图像将显示在大图像容器中）然后这个不同的图像将出现淡入。

是这样的：

我已经尝试使用一些 jQuery 来获得它，但我没有让它工作。我以为它会是这样的，但它不起作用，因为图像 src 发生变化，然后图像出现，然后图像淡出，留下空的 space 而不是图像：

$('.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.

谁能帮我解决这个问题？我知道怎么淡出，怎么改图片src，怎么淡入，但是我做不到。

非常感谢！！

Answer 1

我建议你使用 animate.css(https://daneden.github.io/animate.css/) 这样你就可以通过添加 class 或删除 class.

来管理它

npm i animate.css

确保#change-image 有这个 class "animated"

   $('.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);
        }
    });

Answer 2

fadeOut 接受第二个参数，一个函数。然后，您可以在第一张图像淡出后执行您需要执行的操作。

$('.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>

Answer 3

$('.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>

尝试下面的代码..淡出后替换图像 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>

单击按钮时淡出图像，更改图像 url 然后淡入。如何做？

Fade Out an Image when click on button, change image url and then fade in. How to do it?

html

javascript

css

image

fade

尝试下面的代码..淡出后替换图像 src。