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>
现在它就像一个符咒。