单击它调整循环云图像的大小

Question

这是循环云的代码，动画从右到左循环，我想让云在单击时可以调整大小，但我不知道该怎么做...

<!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;
}

Answer 1

在这段代码中，我们以从左到右然后从右到左的方式为分区设置动画

$(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>

单击它调整循环云图像的大小

Resize a looping cloud image while clicking on it

html

javascript

css

jquery

jquery-animate