Question

我一直在努力寻找一种更优雅的方式来完成这项功能，但还没有想出来。我有2个div，我想在执行函数时调整大小。一个将滑开（宽度：'0％'），另一个填充剩余空间（宽度：'100％'）。下面的代码效果很好，但看起来有点沉重。有什么建议让它更清洁？

function testAct(){             
    $('#sideBar').animate({width:'0%'},500);        
    $('#map_canvas').animate({width:'100%'},500,function(){google.maps.event.trigger(map,'resize')});                       
    if (document.getElementById('map_canvas').style.width == '100%')
    {
        $('#sideBar').animate({width:'25%'},500);       
        $('#map_canvas').animate({width:'75%'},500,function(){google.maps.event.trigger(map,'resize')});                        
    }
}

Answer 1

我会这样做，所以你不要重复自己：

function testAct(){
    var newSideBarWidth,newMapCanvasWidth;
    if(document.getElementById('map_canvas').style.width == '100%'){
        newSideBarWidth = "25%";
        newMapCanvasWidth = "75%";
    }
    else{
        newSideBarWidth = "0%";
        newMapCanvasWidth = "100%";    
    }
    $('#sideBar').animate({width:newSideBarWidth },500);       
    $('#map_canvas').animate({
        width: newMapCanvasWidth 
    },
    function(){
        google.maps.event.trigger(map,'resize')
    });  
}

使用Jquery Animate调整2x divs宽度 - 这是一个糟糕的方法吗？

1 个答案: