Titanic

           // 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');
                                });
                        }
                    }

            });
Vote up this code5
  • Sedthh

    holy fucking shit

  • Fredster

    In Firefox 11, the collision happens, but the ship doesn’t sink and the alert doesn’t happen. Works in Chrome 18.