除非我使用调试器,否则json之后的jquery淡入淡出循环不起作用



css(仅用于某些样式):

body {font-family: Verdana, Arial, sans-serif;background: #dedede;}
.weather {width: 350px;margin: 0px auto;text-align: center;text-transform: uppercase;}
.wx h2 {margin: 0 0 8px;color: #fff;background-color:rgba(0, 0, 0, 0.5);font-size: 48px;font-weight: 300;text-align: center;text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);}
.wx ul {margin: 0;padding: 0;}
.wx li {background: #fff;background: rgba(255,255,255,0.90);padding: 5px;display: inline-block;border-radius: 5px;margin:0 5px;}
.wx {margin: 0 5px;}
#weather2 {margin-top: 0px;}
.wx {width:460px;}

javascript(头):

function InOut( elem )
{
 elem.delay()
     .fadeIn(2000)
     .delay(4000)
     .fadeOut( function(){ 
                   if(elem.next().length > 0)
                   {InOut( elem.next() );}
                   else
                   {InOut( elem.siblings(':first'));}
                 });
}

html

<div id="wx" class="weather"></div>

<script>
$( document ).ready(function() {
var weatherstations = 
   [{"Name":"las vegas, nv","Code":"KLAS"},
    {"Name":"north las vegas, nv","Code":"KVGT"}];
  $.each(weatherstations , function(key,value) {
     $.getJSON('http://www.domain.com/getwx-json.php?station=' + value.Code, function(result){
        $('#wx').append('<div class="wx"><h2>'+result.temp+'</h2><ul><li>'+value.Name+'</li><li>'+result.clouds+'</li><li>'+result.wind+'</li></ul></div>');
     }); //.getjson
  }); //.each weatherstations
});

$(function(){
$('.wx').hide();
InOut( $('.wx:first') );
});
</script>

当我运行这个时,所有的东西都会出现。。。项目列表只是一个接一个地列出。如果我进入控制台,在$('.wx').hide()处放置一个块;然后刷新页面,什么都不显示,脚本就停在那一行。当我继续脚本时。。。然后一切都按照它应该的方式进行:显示一个项目,淡入淡出,显示另一个,等等。它为什么要这样做?我错过了什么?

将正文改写为:

<div id="wx" class="weather"></div>
<script type="text/javascript">
var weatherstations = 
   [{"Name":"las vegas, nv","Code":"KLAS"},
    {"Name":"north las vegas, nv","Code":"KVGT"}];

function Readdata(ms) {
  var gets = [];
  $.each(ms, function(key,value) {
     $.ajax({ 
         type: 'GET', 
         url: 'http://www.domain.com/getwx-json.php?station=' + value.Code, 
         data: { get_param: 'value' }, 
         dataType: 'json',
         success: function(result){
        $('#wx').append('<div class="wx"><h2>'+result.temp+'</h2><ul><li>'+value.Name+'</li><li>'+result.clouds+'</li><li>'+result.wind+'</li></ul></div>');
         }
     }); //ajax call
  }); //each
}; // Readdata

$( document ).ready(Readdata(weatherstations));
$( document ).ajaxStop(function() {
      $('.wx').hide();
      InOut( $('.wx:first') );
});
</script>

现在它就像一个符咒。

最新更新