// it works: http://jsfiddle.net/6guWk/
$(function() {
$('body')
.prepend('<div id="titanic" style="width:200px;height:75px;background:#000;position:absolute;right:0;margin-top:80px"></div>')
.prepend('<div id="iceberg" style="position:absolute;background:#fff;border-radius:25%;box-shadow:inset 0 0 8px #666;width:150px;height:150px;margin-top:10px"></div>')
.prepend('<div id="sea" style="width:100%;height:100%;background:#2591DD;position:absolute;top:160px;"></div>');
$('#titanic')
.animate({
right: '+=5000'
}, 5000);
var collision_detect = window.setInterval(collision_detect, 0);
function collision_detect() {
if($('#titanic').offset().left <= $('#iceberg').offset().left) {
$('#titanic')
.stop()
.css({
'-moz-transform': 'translate(100px) rotate(20deg)',
'-moz-transform-origin': '60% 100%',
'-webkit-transform': 'translate(100px) rotate(20deg)',
'-webkit-transform-origin': '60% 100%',
'-o-transform': 'translate(100px) rotate(20deg)',
'-o-transform-origin': '60% 100%',
'-ms-transform': 'translate(100px) rotate(20deg)',
'-ms-transform-origin': '60% 100%',
'transform': 'translate(100px) rotate(20deg)',
'transform-origin': '60% 100%'
})
.animate({
top: '+=1000'
}, 3000, function() {
alert('My heart will go on and on');
});
}
}
});
$(function() {
$('body')
.prepend('<div id="titanic" style="width:200px;height:75px;background:#000;position:absolute;right:0;margin-top:80px"></div>')
.prepend('<div id="iceberg" style="position:absolute;background:#fff;border-radius:25%;box-shadow:inset 0 0 8px #666;width:150px;height:150px;margin-top:10px"></div>')
.prepend('<div id="sea" style="width:100%;height:100%;background:#2591DD;position:absolute;top:160px;"></div>');
$('#titanic')
.animate({
right: '+=5000'
}, 5000);
var collision_detect = window.setInterval(collision_detect, 0);
function collision_detect() {
if($('#titanic').offset().left <= $('#iceberg').offset().left) {
$('#titanic')
.stop()
.css({
'-moz-transform': 'translate(100px) rotate(20deg)',
'-moz-transform-origin': '60% 100%',
'-webkit-transform': 'translate(100px) rotate(20deg)',
'-webkit-transform-origin': '60% 100%',
'-o-transform': 'translate(100px) rotate(20deg)',
'-o-transform-origin': '60% 100%',
'-ms-transform': 'translate(100px) rotate(20deg)',
'-ms-transform-origin': '60% 100%',
'transform': 'translate(100px) rotate(20deg)',
'transform-origin': '60% 100%'
})
.animate({
top: '+=1000'
}, 3000, function() {
alert('My heart will go on and on');
});
}
}
});