Question

我正在创建一个网站，我需要一些问题的帮助。我将上传一张图片供您更好地理解。

我中间有一个很大的图像，在它的下面有一些像links（）一样的单词。我需要发生这种情况： 1.网站加载时，出现大图。 2.当我单击一个按钮（用作链接的单词）时，我希望大图像逐渐淡出，然后更改图像src（以便在大图像容器中显示不同的图像），然后该不同的图像将逐渐消失。

是这样的：

我已经尝试通过使用一些jQuery来实现此目的，但是我没有使其工作。我以为会是这样，但是它不起作用，因为图像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.

有人可以帮我解决这个问题吗？我知道如何淡出，如何更改图像src以及如何淡入，但是我无法像我想的那样一起完成所有工作。

非常感谢您！

Answer 1

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 2

我建议您使用animate.css（https://daneden.github.io/animate.css/），这样就可以通过添加类或删除类来实现这一目的。

npm i animate.css

确保＃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);
        }
    });

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，然后淡入。如何实现？

3 个答案:

尝试以下代码。淡出后替换图像src。