我继承了这个脚本,它会将一些项目填充到HTML中,我想知道如何编辑它,这样当你点击" roster_left_column" div #roster_column_right将会淡入,而不是仅仅快速出现。我读过有一个jquery .fade(),但我不知道在哪里添加
以下是右栏的HTML
<div id="roster_column_right">
<div id="0001" class="teamroster" style="display:none">
<module name="ROSTER" FRANCHISE="0001"/>
</div>
<div id="0002" class="teamroster" style="display:none">
<module name="ROSTER" FRANCHISE="0002"/>
</div>
<div id="0003" class="teamroster" style="display:none">
<module name="ROSTER" FRANCHISE="0003"/>
</div>
</div>
这是脚本
var isUserLoggedIn = typeof franchise_id === 'undefined'?false:true;
var rosterJson1 = '';
var leagueJson1 = '';
var middleFranchise = '';
$(function()
{
$.when
(
getLeagueDataFromAjax(getURLForLeague()),
getRosterDataFromAjax(getURLForRoster())
)
.done(function(a,b)
{
setFranchiseIdForCommish();
displayResults();
});
});
function displayResults()
{
// var commonHTML_start = '<table align="center" ><tr>';
// var commonHTML_end = '</tr></table>'
var columnLeft = '';
var columnMiddle = '';
var columnRight = '';
columnMiddle = createColumnMiddle();
columnLeft = createColumnLeft(rosterJson1.rosters.franchise);
// if(columnLeft!=null && columnLeft.trim()!='')
// {
// columnLeft = '<td><div id="roster_column_left">'+columnLeft+'</div></td>';
// columnRight = '<td><div id="roster_column_right"></div></td>';
// }
// if(columnMiddle!=null && columnMiddle.trim()!='')
// {
// columnMiddle = '<td><div id="roster_column_middle">'+columnMiddle+'</div></td>';
// }
// jQuery('#nitro-roster').html(commonHTML_start+''+columnLeft+columnMiddle+columnRight+''+commonHTML_end);
jQuery('#roster_column_left').html(columnLeft);
// jQuery('#roster_column_middle').html(columnMiddle);
if(isUserLoggedIn)
{
for(var i=0; middleFranchise!='' && i<rosterJson1.rosters.franchise.length;i++)
{
if(middleFranchise != rosterJson1.rosters.franchise[i].id)
{
populateSelectedFranchise(rosterJson1.rosters.franchise[i].id);
break;
}
}
}
else
{
populateSelectedFranchise(rosterJson1.rosters.franchise[1].id);
}
}
function createColumnLeft(fpid)
{
var htmlComponent_s = '<table>';
var htmlComponent_e = '</table>';
var temoComp = '';
for(var i=0;fpid!=null && i<fpid.length ;i++)
{
if(!(middleFranchise!='' && fpid[i].id==middleFranchise))
{
var fdb = franchiseDatabase['fid_'+fpid[i].id];
if(fdb instanceof Franchise)
{
temoComp += '<tr id="left_menu_'+i+'"><td>';
var displayName = '';
if(fdb.icon == null || fdb.icon.trim() == '')
{
displayName = fdb.name;
}
else
{
displayName = '<img src="' + fdb.icon + '"class="franchiseicon" title="' + fdb.name + '" />'
}
temoComp = temoComp + '<a href="javascript:populateSelectedFranchise(\''+fdb.id+'\')">' + displayName +'</a>' ;
temoComp = temoComp + '</td></tr>';
}
}
}
return htmlComponent_s+temoComp+htmlComponent_e;
}
function populateSelectedFranchise(f_id)
{
jQuery('#roster_column_right div').hide();
jQuery('#'+f_id).show();
}
function createColumnMiddle()
{
var rowData = '';
var fr_value = '';
if(isUserLoggedIn)
{
if(franchise_id=='0000')
{
if(typeof commishFranId != 'undefined' && commishFranId!='' && commishFranId!='0000')
{
middleFranchise = commishFranId;
}
else
{
middleFranchise = rosterJson1.rosters.franchise[0].id; // For Guest.. Show the First Roster
}
}
else
{
middleFranchise = franchise_id;
}
}
else
{
middleFranchise = rosterJson1.rosters.franchise[0].id; // For Guest.. Show the First Roster
}
jQuery('#roster_column_middle div').hide();
jQuery('#'+middleFranchise+'_m').show();
}
function getRosterModuleForFranchiseId(f_id)
{
var result = jQuery('#'+f_id).html();
return result;
}
function setFranchiseIdForCommish()
{
for(var i=0; leagueJson1.league.franchises.franchise!=null && leagueJson1.league.franchises.franchise!= undefined && i<leagueJson1.league.franchises.franchise.length;i++)
{
if(leagueJson1.league.franchises.franchise[i].iscommish != undefined && leagueJson1.league.franchises.franchise[i].iscommish =="1")
{
commishFranId = leagueJson1.league.franchises.franchise[i].id;
break;
}
}
}
function getURLForRoster()
{
return '/'+window.year+'/export?TYPE=rosters&L='+window.league_id+'&JSON=1';
}
function getURLForLeague()
{
return '/'+window.year+'/export?TYPE=league&L='+window.league_id+'&W=&JSON=1';
}
function getRosterDataFromAjax(url)
{
$.ajax({
url: url,
success: function(data) {
rosterJson1=data;
},
async:false
});
}
function getLeagueDataFromAjax(url)
{
$.ajax({
url: url,
success: function(data) {
leagueJson1=data;
},
async:false
});
}
答案 0 :(得分:0)
想出来,很简单,只是学习如此反应
jQuery(&#39; #roster_column_right div&#39;)。hide(); jQuery的(&#39;#&#39 + F_ID).show;
更改为
jQuery(&#39; #roster_column_right div&#39;)。hide(); jQuery的(&#39;#&#39 + F_ID).fadeIn(500);