animating image change with jQuery

Question

I trying to animate img change from a div and I tried to use jquery to do so as it seems the cleanest way. I tried to use this answer but without any success. Where I am wrong with my approach?

HTML:

 <div class="jumbotron text-center" id="main-jum">
    <img id="jum-img" src = "https://im.whatshot.in/img/2017/Oct/churrosweb-1509092812.jpg">
 </div>


  <div class="container-fluid text-center d-none d-md-block" id="jum-btns">
     <div id="jum-btn" class="btn-group " role="group" aria-label="Basic example">
      <button type="button" id="btn-left" class="btn btn-secondary jum-btn" onclick="changeColor();">Left</button>
      <button type="button" id="btn-middle" class="btn btn-secondary jum-btn" onclick="changeColor();">Middle</button>
      <button type="button" id="btn-right" class="btn btn-secondary jum-btn" onclick="changeColor();">Right</button>
    </div>
  </div>

<script type="text/javascript">
$(document).ready(function(){
  $('#btn-left').click(function() {
   $('#jum-img').fadeOut(500, function() {
       $('#jum-img').attr("src","https://truffle-assets.imgix.net/pxqrocxwsjcc_5pcvIMJdpmi8COGYQ0kua6_churros-with-dulce-de-leche_landscapeThumbnail_en-US.jpeg");
       $('#jum-img').fadeIn(500);
     });
  });
});
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Codepen

You're close, you can use fadeToggle if you want to fadeOut/fadeIn back: https://api.jquery.com/fadeToggle/ I'd much prefer toggling a class and handling a CSS fading animation but it's up to you — t3__rry, Feb 13 '18 at 07:26

score 1 · Answer 1 · answered Feb 13 '18 at 07:31

1

you're calling "#jum-Img" but your id is actually "#jum-img", once you change the I to lowercase, your code should work.

answered Feb 13 '18 at 07:31

Stephanie Dover

97
3

yes I changed it thank you but unfortunately it's still not working. Please check the codepen I added. – obiwankenoobi Feb 13 '18 at 07:59

score 0 · Accepted Answer · answered Feb 13 '18 at 08:04

It is so simple. Just put all the js and script before the HTML codes.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $('#btn-left').click(function() {
   $('#jum-img').fadeOut(500, function() {
       $('#jum-img').attr("src","https://truffle-assets.imgix.net/pxqrocxwsjcc_5pcvIMJdpmi8COGYQ0kua6_churros-with-dulce-de-leche_landscapeThumbnail_en-US.jpeg");
       $('#jum-img').fadeIn(500);
     });
  });
});
</script>

<div class="jumbotron text-center" id="main-jum">
    <img id="jum-img" src = "https://im.whatshot.in/img/2017/Oct/churrosweb-1509092812.jpg">
 </div>
  <div class="container-fluid text-center d-none d-md-block" id="jum-btns">
     <div id="jum-btn" class="btn-group " role="group" aria-label="Basic example">
      <button type="button" id="btn-left" class="btn btn-secondary jum-btn" onclick="changeColor();">Left</button>
      <button type="button" id="btn-middle" class="btn btn-secondary jum-btn" onclick="changeColor();">Middle</button>
      <button type="button" id="btn-right" class="btn btn-secondary jum-btn" onclick="changeColor();">Right</button>
    </div>
  </div>

animating image change with jQuery

2 Answers2