JQuery click method not working

Question

I am trying to have a button that you press in the center that will make all elements in a div slide up.

$(document).ready(function() {
  $("#imgs").click(function() {
    $("#start").animate({
      bottom: "+=250px"
    }, "slow");
  });
});

#imgs {
  display: block;
  margin: 0 auto;
  opacity: 1.0;
  filter: alpha(opacity=100);
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  bottom: 0px;
}
#imgs:hover {
  opacity: 1;
  filter: alpha(opacity=100);
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
}
html {
  width: 100%;
  height: 100%;
  clip: auto;
  position: absolute;
  overflow-x: hidden;
  overflow-y: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<body style="margin:0;">

  <div id="start" style="bottom:0px">
    <img src="saint die.jpg" style=" z-index:-20; width:150%; position:absolute">
    <div align="center" style="bottom:69%; position:absolute; width:45%; left:28%; ;">
      <img src="DELICETEXT.png" alt="delice" style="width:100%">
    </div>
    <div id="imgs" align="center" style="position:absolute; width:25%; height: 25%; left:38%; top:30%;">
      <img src="delice.png" alt="L'arbre a Delices" style="width:100%; position: relative;">
    </div>
  </div>
</body>

When I hover over the button/image, it enlarges as expected. However, nothing happens when I click on it. I haven't seen any errors in the console, and searching Google turned up nothing.

How can I fix this?

Your using bottom but never gave a type of position in your CSS. Check to see if it's changing the value itself in the console or inspector. — Spencer Wieczorek
– Spencer Wieczorek, Commented Aug 23, 2016 at 21:19

j08691 · Accepted Answer · 2016-08-23 21:19:18Z

1

You have to specify a position to an element to allow animate to move it if you're animating the top, right, bottom, or left properties:

<div id="start" style="bottom:0px; position:relative;">

Per the .animate() documentation:

Directional properties (top, right, bottom, left) have no discernible effect on elements if their position style property is static, which it is by default.

answered Aug 23, 2016 at 21:19

j08691

209k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Luca Donati Over a year ago

the key here is the position:relative that I forgot to state in my #start div

Collectives™ on Stack Overflow

JQuery click method not working

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related