One of my arrows (id="darrow") is not responding to the opacity: 0.7 property in my CSS, while the other arrow works perfectly fine. Can anyone help me figure out what's going wrong? It was working fine until I added a second arrow and an animation.
HTML:
<img src="images/stills/uarrow.png" id="uarrow">
<img src="images/stills/darrow.png" id="darrow"> <!--Troublesome 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");
});
});