Исчезните изображение, когда нажмите на кнопку, измените URL изображения, а затем постепенно добавьте изображение. Как это сделать? - PullRequest
Новая
       6

Исчезните изображение, когда нажмите на кнопку, измените URL изображения, а затем постепенно добавьте изображение. Как это сделать?

1 голос
/ 24 апреля 2019

Я создаю веб-сайт, и мне нужна помощь с проблемой.Я выложу картинку, чтобы вы лучше ее поняли.

В середине у меня большое изображение, а под ним есть несколько слов, которые действуют как ссылки ().Мне нужно, чтобы это произошло: 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.

Кто-нибудь может помочь мне решить это?Я знаю, как постепенно исчезать, как менять источник изображения и как постепенно увеличивать изображение, но я не могу делать все вместе, как хотелось бы.

Большое спасибо !!

Ответы [ 3 ]

2 голосов
/ 24 апреля 2019

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>
0 голосов
/ 24 апреля 2019 

$('.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>
0 голосов
/ 24 апреля 2019

Я предлагаю вам использовать 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);
        }
    });
...