调整一个循环的云图像，而在其上点击(Resize a looping cloud image whi

下面是循环云的代码，动画由右至左循环，我想作的时候点击，但我不知道该怎么做云计算调整，能...

<!DOCTYPE>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <div id="clouds">
        <img border="0" alt="animated clouds" src="clouds.png">
        <script>
            $(document).ready(function() {
                function loop() {
                    $('#clouds').css({right:0});
                    $('#clouds').animate ({right: '+=1400'}, 5000, 'linear', function() {
                        loop();
                    });
                }
                loop();
            });
        </script>
    </div>
</body>
</html>

以下是我试过调整云：

$("#clouds").click(function() {
    $("size").animate({"height" : "350"}, 500);
});

和CSS：

#clouds {
    position:absolute;
    z-index:500;
    right:0px;
    top:10px;
}

在这段代码中，我们动画以这样一种方式，它从左至右动画，然后右键告到左

 $(document).ready(function() { function loop() { $('.bouncer').animate({'left': '500'}, { duration: 1000, complete: function() { $('.bouncer').animate({left: 0}, { duration: 1000, complete: loop}); }}); $('<div/>').text('exiting loop').appendTo($('.results')); } loop(); $("#clouds").click(function() { console.log("click"); $("#clouds").animate({"height" : "350"}, 500); }); });

 .bouncer { position: absolute; width: 50px; height: 50px; background-color: red; } .results { float: right; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> </head> <body> <div class="bouncer"> <img id="clouds" border="0" alt="animated clouds" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsi7hhTHPPcliUGlq2tVlaPu5cmw5QHJOVyQyugHTZOnqLECHLGL9S-qU"> </div> </html>