如何使用jquery淡入div元素

时间:2014-08-23 22:26:26

标签: jquery

我继承了这个脚本,它会将一些项目填充到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
  });


}

1 个答案:

答案 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);