Question

我希望我的<div>内容能够在我的网站加载时顺利输入。当网站加载时，他们必须一个接一个地出现。此外，背景图片在weatherType过滤后会加载较晚。这是一个localWeather网页，根据您打开页面的位置为您提供天气信息。

注意： - 请在codepen.io等其他第三方网站开发网站上发布代码以访问API。

这是我的代码：

＆＃13;

$(document).ready(function() {
  $(".text-center").fadeIn();
            var lon, lat, weatherType, ftemp, ktemp, ctemp, wspeed;

            if (navigator.geolocation) {

                navigator.geolocation.getCurrentPosition(function(position) {
                        lon = position.coords.longitude;
                        lat = position.coords.latitude;
                        var api = 'https://api.openweathermap.org/data/2.5/forecast?lat=' + lat + '&lon=' + lon + '&appid=bb4b778076b0c8c79c7eb8fcd1fd4330';
                        $.getJSON(api, function(data) {
                            // $("#data").html(api);
                            var city = data.city.name;
                            weatherType = data.list[0].weather[0].description;
							//weatherType="clear sky";
                            ktemp = data.list[0].main.temp;
                            console.log(ktemp);
                            ftemp = (9 / 5 * (ktemp - 273) + 32).toFixed(1);
                            ctemp = (5 / 9 * (ftemp - 32)).toFixed(1);
                            wspeed = data.list[0].wind.speed;
                            wspeed = (wspeed * 5 / 18).toFixed(1);
                            /* $("#city").addClass("animated fadein",function(){
							 $("#city").html(city);
							 }); */
							 $("#city").addClass("animated fadein");
							 $("#city").html(city);
                            $("#weatherType").html(weatherType);
                            $("#temp").html(ctemp + " &#8451;");
                            //$("[name='my-checkbox']").bootstrapSwitch();
                            $("#degree-toggle").attr("value", $("<div/>").html("&#8457;").text());
                            var celsius = true;
                            $("#degree-toggle").on("click", function() {
                                if (celsius === true) {
                                    $("#temp").html(ftemp + " &#8457;");
									$("#temp").fadeIn();
                                    $("#degree-toggle").attr("value", $("<div/>").html("&#8451;").text());
                                    celsius = false;
                                } else {
                                    $("#temp").html(ctemp + " &#8451;");
									$("#temp").fadeIn();
                                    $("#degree-toggle").attr("value", $("<div/>").html("&#8457;").text());
                                    celsius = true;
                                }
                            });
                            $("#wspeed").html(wspeed + " kmph");
							weatherType=weatherType.toLowerCase();
                            if (weatherType === "clear sky")
                                $("body").css("background-image", "url('https://static.pexels.com/photos/281260/pexels-photo-281260.jpeg')");
                            else if (weatherType === "few clouds")
                                $("body").css("background-image", "url('https://clearalliance.org/wp-content/uploads/2015/01/CLEAR-see-clear-flowers-e1422658973500.jpg')");
                            else if (weatherType === "cloudy")
                                $("body").css("background-image", "url('http://www.gazetteseries.co.uk/resources/images/5360796/')");
							else if (weatherType === "sunny")
							    $("body").css("background-image","url('https://i2-prod.examiner.co.uk/incoming/article10372520.ece/ALTERNATES/s1227b/JS75768352.jpg')");
							else if (weatherType==="showers")
							    $("body").css("background-image","url('http://ak8.picdn.net/shutterstock/videos/1479838/thumb/1.jpg')");
                          else if(weatherType==="overcast clouds") 
                                $("body").css("background-image","url('https://patchegal.files.wordpress.com/2012/07/img_2406.jpg')");
                          else if(weatherType==="light rain")
                               $("body").css("background-image","url('https://i.ytimg.com/vi/LbAigABOm_E/maxresdefault.jpg')");
	                        else
							    $("body").css("background-image","url('https://www.almanac.com/sites/default/files/image_nodes/thanksgiving-weather.jpg')");
                        });
                    });
                }
            });

＆＃13;

.text-center{
  display: none;
}

＆＃13;

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;lang=en" /><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
  <body>
     <div class="text-center" id="content">
      <div> <h1><b>Weather Today</b></h1></div><br/>
       <h2>Location : <span id="city"></span></h2> <br/>
       <h2>Weather : <span id="weatherType"></span></h2><br/>
       <h2>Temperature : <span id="temp">
     </span>
	 <input type="button" id="degree-toggle"  checked="checked">
      </h2><br/>
     <h2>Wind Speed : <span id="wspeed"></span></h2><br/>
      </div>
    </body>
</html>

＆＃13;

Answer 1

首先，我会使用动画来实现平滑输入，而不仅仅是将元素切换为可见。

其次我不会手动编写元素，如果你有20个元素怎么办？ 1000呢？

从这样的框架开始，然后根据您的情况进行调整：

<强> HTML

<div id="elementsInThis">
  <div class="K">ELEMENT 1</div>
  <div class="K">ELEMENT 2</div>
  <div class="K">ELEMENT 3</div>
  <div class="K">ELEMENT 4</div>
  <div class="K">ELEMENT 5</div>
  <div class="K">ELEMENT 6</div>
  <div class="K">ELEMENT 7</div>
  <div class="K">ELEMENT 8</div>
  <div class="K">ELEMENT 9</div>
</div>

<强> JS

var delay = 0;

function animate(element, delay){
    window.setTimeout(function(){
        element.style.display = 'block';
    }, delay*1000)
}

var elements = document.getElementById("elementsInThis").childNodes;
var onlydivs = Object.keys(elements).forEach(function(index, element){
    if (elements[element].nodeType !== Node.TEXT_NODE) 
    animate(elements[element], delay++);
});

<强> CSS

.K{
  display: none;
  background: red;
  border: solid 2px black;
  animation-name: appear;
  animation-duration: 4s;
  animation-fill-mode: forwards;
}

@keyframes appear{from{left:-300px;opacity:0} to{left:0;opacity:1}}

在这里你可以看到它的实际效果：

js fiddle

根据自己的喜好修改动画和延迟，如果您有更复杂的动画，也可以绑定到您自己的父级并更好地选择孩子。这只是一个演示，但原理与您执行以下操作相同：

您想利用CSS来制作正确的（或找到其他人的）动画，并将元素的默认显示设置为无（如果您的HTML分开，可能需要使用可见性）
使用固定延迟步骤制作延迟功能（我使用步骤1 * 1000 ms）
利用childNodes forEach()和Object.keys()来避免手动将CSS类与动画绑定到元素
如果您愿意，可以在不同的CSS类中使用其余的样式

Answer 2

虽然我不能给你一个确切的答案，因为我即将回家。你可以做的是为你的动画功能专门设置一个功能。然后在您的脚本中，您将为每个元素分配一个setTimeout事件，在显示之前为每个元素分配一个特定的延迟。然后，您可以在元素上添加转换或动画属性。

CSS

.elements {
//css here
}

JS

//delay = time in ms before show, element = element to show.
function letAnimate(delay, element){
    window.setTimeout(function(){
        element.style.display = 'block';
    }, delay);
}

function startAnimate(){
     letAnimate(1000, el1); //your first element which will show 1s after function call
     letAnimate(2000, el2); //2nd element, will show after 2s
     letAnimate(3000, el3); //3rd, 3s, so forth so on
}


window.onload = function(){ startAnimate(); };
//make this jquery on() or addEventListener.
//You don't want this function to override window.onload event.

当我的网站加载时，如何为我的`<div>`元素添加动画条目

2 个答案: