One of the two arrows I have, and I'm not pointing fingers (its id="darrow") does not see to be affected by my opacity: 0.7; property in my CSS. Can anyone see what's wrong? It worked fine before I added the second arrow and the animation. The other arrow seems to work flawlessly however.
HTML:
<img src="images/stills/uarrow.png" id="uarrow"> <img src="images/stills/darrow.png" id="darrow"> <!--Problem arrow--> <div id="footer"> <p id="fpara">Site/logo design by Zachary Ledyard.</p> </div> CSS:
#darrow { bottom: 20px; } #uarrow { bottom: -40px; } #darrow, #uarrow { position: fixed; left: 50%; margin-left: -9px; padding: 0; width: 18px; height: 14px; opacity: 0.7; z-index: 11; } #darrow, #uarrow:hover { opacity: 1.0; } #footer { padding: 0; width: 100%; height: 70px; position: fixed; bottom: 0; border-top: 1px solid #000000; z-index: 6; background-color: rgba(255, 128, 0, 0.7) } JQuery;
$(document).ready(function(){ $("#darrow").click(function(){ $("#footer").animate({"top": "+=100px"}, "slow"); $("#uarrow").animate({"top": "-=50px"}, "slow"); $("#darrow").animate({"top": "+=100px"}, "slow"); }); }); $(document).ready(function(){ $("#uarrow").click(function(){ $("#footer").animate({"top": "-=100px"}, "slow"); $("#uarrow").animate({"top": "+=50px"}, "slow"); $("#darrow").animate({"top": "-=100px"}, "slow"); }); }); 
