Is there a way to simultaneously move "app1" to the left and fade it out?
Currently, the functions are executing one after the other. I want them to occur simultaneously, without the left movement happening before the fade out.
Thank you!
<!DOCTYPE html>
<html>
<head>
<title>Forget Me Not</title>
<style>
body
{
background-color:#66d9ff;
}
#app1{
position:absolute;
width:250px;
height:250px;
z-index:0;
top:50%;
left:50%;
margin:-150px 0 0 -150px;
background:white;
box-shadow: 0 0 1px 1px #888888;
text-align:center
}
img.appIMG1{
-webkit-box-shadow: 0 0 1px 1px #888888;
box-shadow:0 0 1px 1px #888888;
}
img.appIMG2{
-webkit-box-shadow: 0 0 1px 1px #888888;
box-shadow:0 0 1px 1px #888888;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$(".appIMG1").click(function () {
$("#app1").animate({
left: '250px'
}).fadeOut();
});
});
</script>
</head>
<body>
<!-- php stuff goes the body -->
<div id="app1"><p><b><u><font face="TimeBurner" color="#66d9ff" size="6">Do you want to make a reminder?</b></u></font></p>
<br>
<img class="appIMG1" border="0" src="YES.png" align="left" hspace=1.8% >
<img class="appIMG2" border="0" src="NO.png" align="right" hspace=2%>
</div>
</body>
</html>