Untitled

<!DOCTYPE html>
<html lang="pl">
<head>
    <!-- meta -->
    <meta charset="utf-8" />
    <meta name="keywords"  content="" />
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css">

    <script>
    $(document).ready(function() {

        $('#panda').hover(function(){
            $(this).animate({'opacity':0}, 110);
            setTimeout(function(){
                $('#panda').css({'background-image': 'url("kwadrat2.png")'});
                $('#panda').animate({'opacity':1}, 110);
            }, 120);
        }, function(){
            $(this).animate({'opacity':0}, 80);
                setTimeout(function(){
                $('#panda').css({'background-image': 'url("kwadrat1.png")'});
                $('#panda').animate({'opacity':1}, 110);
            }, 120);
            }
        );

    });

    </script>

</head>

<body>

<div id="panda">

</div>

</body>
</html>