NL_Miquel NL_Miquel - 2 months ago 8
CSS Question

What am I doing wrong? I'm trying to make an image bigger and smaller on a click with jQuery

I'm trying to make an image bigger when I click on a link but it won't work.

What am I doing wrong?

JQUERY:

$(document).ready(function(){
$('a, large').click(function(){
$("img").animate({width: "300px"});

});

$('a, small').click(function(){
$("img").animate({width: "75px"});
});
});


HTML:

<center>
<img src="TCRlogo.png"/></br>
<a href="#" id="large">Large</a> - <a href="#" id="small">Small</a>
</center>

Answer

Your selector is wrong. It should be like #id. Please check below snippet for more understanding.

$(document).ready(function(){
  $('a#large').click(function(){
    $("img").animate({width: "300px"});

  });

  $('a#small').click(function(){
    $("img").animate({width: "75px"});
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center>
<img src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300"/></br>
<a href="#" id="large">Large</a> - <a href="#" id="small">Small</a>
</center>