I am trying to check collisions in jQuery in the animate feature. Heres my code,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>nothing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$(document).keydown(function(event) {
if (event.which == 37) {
$('.button0 input').animate({
'left': '+=' + Math.cos(90 * Math.PI / 180) * 30 + 'px',
'top': '+=' + Math.sin(90 * Math.PI / 180) * 30 + 'px'
}, 0);
}
});
$(document).keydown(function(event) {
if (event.which == 39) {
$('.button0 input').animate({
'left': '+=' + Math.cos(180 * Math.PI / 180) * 30 + 'px',
'top': '+=' + Math.sin(180 * Math.PI / 180) * 30 + 'px'
}, 0);
}
});
$(document).keydown(function(event) {
if (event.which == 38) {
$('.button0 input').animate({
'left': '+=' + Math.cos(270 * Math.PI / 180) * 30 + 'px',
'top': '+=' + Math.sin(270 * Math.PI / 180) * 30 + 'px'
}, 0);
}
});
$(document).keydown(function(event) {
if (event.which == 40) {
$('.button0 input').animate({
'left': '+=' + Math.cos(0 * Math.PI / 180) * 30 + 'px',
'top': '+=' + Math.sin(0 * Math.PI / 180) * 30 + 'px'
}, 0);
}
});
});
</script>
<style type="text/css">
.button0 input{
position:fixed;
left:142px;
top:77px;
font-family:Arial;
font-size:8px;
font-weight:NORMAL;
}
.button1 input{
position:fixed;
left:333px;
top:58px;
font-family:Arial;
font-size:8px;
font-weight:NORMAL;
}
</style>
<body>
<div class="button0"><input type="button" style="width: 59px;height: 58px;" value="Button 0"/></div>
<div class="button1"><input type="button" style="width: 113px;height: 76px;" value="Button 1"/></div>
</body>
</html>
is there an event where we could check if button0 has collided with button1,
(without checking during the movement)
something like this would be nice (to have it as an event):
$('.button0 input').collision(function(".button1 input"){
