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

Answer 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"});
});

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

1 个答案: