Luca Donati Luca Donati - 1 month ago 5x
CSS Question

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() {
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=""></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 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;">

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?


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.