CODEWITHSUNDEEP
jqueryhtmlcss
Luca Donati
Luca Donati

Reputation: 35

JQuery click method not working

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?

Upvotes: 0

Views: 35

Answers (1)

j08691
j08691

Reputation: 208032

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.

Upvotes: 1

Related Questions