html - JQuery click method not working -
i trying have button press in center make elements in 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: 1s ease; -moz-transition: 1s ease; -ms-transition: 1s ease; -o-transition: 1s ease; transition: 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 delices" style="width:100%; position: relative;"> </div> </div> </body>
when hover on button/image, enlarges expected. however, nothing happens when click on it. haven't seen errors in console, , searching google turned nothing.
how can fix this?
you have specify position element allow animate move if you're animating top
, right
, bottom
, or left
properties:
<div id="start" style="bottom:0px; position:relative;">
directional properties (
top
,right
,bottom
,left
) have no discernible effect on elements ifposition
style propertystatic
, default.
Comments
Post a Comment