单击时，我无法调整循环“云”图像的大小答案

【问题标题】：I am having trouble making a looping "cloud" image resize when clicked on单击时，我无法调整循环“云”图像的大小
【发布时间】：2017-09-11 02:35:11
【问题描述】：

所以这里是代码，云从右向左移动，我想让它在点击时调整大小，如果有人知道如何在悬停时更改云的颜色，那就太好了！

    <!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>
    </html>
    Also here is the code I tried using when resizing the cloud.

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

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

【问题讨论】：

这个问题和你之前问的问题一样吗？ here
Hello I am trying to resize my looping cloud image while clicking on it but the click wont register的可能重复

标签： javascript jquery html css animation

【解决方案1】：

$("#clouds").click(function(){
    $("#clouds").css({"height" : "350", "background-color" : "red"});
});

我看不到您的 CSS，但假设 #clouds 只是云本身，这将是更改云的高度和颜色的一种方法。

您似乎还试图在 0.5 秒内应用高度变化？如果是这种情况，您可以通过添加一个额外的 css 属性来做到这一点。

$("#clouds").click(function(){
    $("#clouds").css({"height" : "350", 
    "background-color" : "red", 
    "transition" : "height 0.5s"});
});

【讨论】：

感谢代码我明天试试，如果你仍然想知道 css 在那里你只需要滚动哈哈