Question

我在编写一个JQuery函数时遇到问题，该函数会在下午6点之前从左下角到右上角对角移动太阳图像，一旦时间变量到达下午6点，就会使月亮图像对角线上升到右上角而太阳落后于它的原始位置。谢谢你的帮助。

<script type="text/JavaScript">    

var objDate = new Date();
var time = objDate.getHours();

        $(document).ready(function() {
           if (time < 18)
                $("sun").animate({
                  'left' : "+=30px", 
                  'top' : "-=30px" 
                }, 5000);
                $('moon').animate({
                  'left' : "-=30px", 
                  'top' : "+=30px" 
                }, 5000);

           if (time > 18)
                $("sun").animate({
                  'left' : "-=30px", 
                  'top' : "+=30px" 
                }, 5000);
                $("moon").animate({
                  'left' : "+=30px", 
                  'top' : "-=30px" 
                }, 5000);
            });

</script>



<style type="text/css">
        #citiscape{
            position: absolute;
            bottom: 0px;
            left: 0px;
            z-index: 5;
            background-image: url(city.png);
            background-repeat: repeat-x;
            width: 100%;
            height: 300px;
        }

        #sun {
            width: 300px;
            height: 300px;
            position: absolute;
            left: 250px;
            top: 400px;
            z-index: 2;
            background-image: url(sun.jpg)
        }

        #moon {
            width: 300px;
            height: 300px;
            position: absolute;
            left: 500px;
            top: 650px;
            z-index: 3;
            background-image: url(moon.png); 
            background-size: cover;
            border: 1px solid green;
        }                   
</style>
</head>

<body>
<div id="citiscape"></div>
<div id="sun"></div> 
<div id="moon"></div>
</body>

Answer 1

你无法动画，因为你的jQuery选择器是错误的。它正在等待CSS选择器。

 $("sun").animate //"sun" is not a CSS selector

 $("#sun").animate //"#sun" (ID) is the correct one.

JQuery - 基于时间条件的移动图像

1 个答案: