試圖移動使用CSS和jQuery的屏幕面板

我在屏幕上有兩個面板，每個屏幕的大小都是半屏。試圖移動使用CSS和jQuery的屏幕面板

<body> 
    <div class="wrapper"> 
    <div id="left" data-pane="leftpane"></div> 
    <div id="right" data-pane="rightpane"></div> 
</div> 

<script> 
    (function(){ 
    var left = $('div#left') 
    left.on('click', function() { 
     console.log('pane clicked'); 
     left.animate({'width': '+=200'},1000, 'swing', function() { 
     console.log($(this).data('pane') + ' ready'); 
     }); 
    }); //end onclick 
    })(); 
</script> 
</body>

和一些CSS

.wrapper{ 
    width: 100vw; 
    overflow: auto; 
} 

#left{ 
    display: block; 
    float: left; 
    width: calc(100vw/2); 
    height:100vh; 
    background: #c6c6c6; 
} 

#right{ 
    display: block; 
    float: right; 
    width: calc(100vw/2); 
    height: 100vh; 
    background: #666; 
}

，當我在左邊點擊（例如）塊 - 它的增長，符合市場預期，但相反塊俯衝下來，因爲我不知道如何同時無痛地減少其寬度以保持原始屏幕尺寸。

如果面板可以「覆蓋」對面板，那將會很不錯。

任何幫助表示讚賞。感謝

來源

2017-02-07 d2048

你可以使用50vw是一半100vw不使用calc()

而且你可以在父用柔性，定義#left的寬度，然後設置#right到flex-grow: 1所以它使用的可用空間..然後調整#left，如你所見，#right將適應。

var left = $('div#left') 
 
left.on('click', function() { 
 
    console.log('pane clicked'); 
 
    left.animate({ 
 
    'width': '+=200' 
 
    }, 1000, 'swing', function() { 
 
    console.log($(this).data('pane') + ' ready'); 
 
    }); 
 
});

.wrapper{ 
 
    width: 100vw; 
 
    overflow: auto; 
 
    display: flex; 
 
    height:100vh; 
 
} 
 

 
#left{ 
 
    width: 50vw; 
 
    background: #c6c6c6; 
 
} 
 

 
#right{ 
 
    background: #666; 
 
    flex-grow: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <div class="wrapper"> 
 
    <div id="left" data-pane="leftpane"></div> 
 
    <div id="right" data-pane="rightpane"></div> 
 
</div>

如果你想#left去的#right頂部，您可以使用絕對定位

var left = $('div#left') 
 
left.on('click', function() { 
 
    console.log('pane clicked'); 
 
    left.animate({ 
 
    'width': '+=200' 
 
    }, 1000, 'swing', function() { 
 
    console.log($(this).data('pane') + ' ready'); 
 
    }); 
 
});

.wrapper{ 
 
    width: 100vw; 
 
    overflow: auto; 
 
    position: relative; 
 
} 
 

 
#left,#right { 
 
    height: 100vh; 
 
    width: 50vw; 
 
} 
 

 
#left{ 
 
    background: #c6c6c6; 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 

 
#right{ 
 
    background: #666; 
 
    position: absolute; 
 
    right: 0; top: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <div class="wrapper"> 
 
    <div id="left" data-pane="leftpane"></div> 
 
    <div id="right" data-pane="rightpane"></div> 
 
</div>

來源

2017-02-07 19:06:40

非常感謝。這只是我尋找的。 – d2048

@ d2048你打賭:) –

試圖移動使用CSS和jQuery的屏幕面板

回答

相關問題