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

【问题标题】：Resize a looping cloud image while clicking on it单击它时调整循环云图像的大小
【发布时间】：2018-02-18 22:19:32
【问题描述】：

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

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

【问题讨论】：

标签： javascript jquery html css jquery-animate

【解决方案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>

【讨论】：

这是您的预期输出吗？
您好，非常感谢您提供此代码，我也搞砸了，直到现在我还没有发布 css，所以您也可以查看我的代码，我也做了一个代码笔链接codepen.io/PepiLepi/pen/RZXqGj：D
我的回答呢？对你解决问题有用吗？
你好，是的，它真的很有用，但我有一个问题，我整天都在尝试制作三个完全相同的循环，它们都在彼此之下，但我不知道如何。 ..如果你能告诉我怎么做，那就太棒了！
如果它对你有用，你为什么不接受这个答案？不管你说你做了三个循环，但让我知道你用这段代码修改了什么。你能分享你的新代码吗？