奇怪的行爲，當我在顯示和隱藏之間交替浮動圖形

Question

當我點擊一個按鈕隱藏和顯示圖形時，渲染的第二個和第三個圖形似乎超出了它們的CSS邊界。像這樣：

第一張圖通常呈現：

而且導航按鈕的點擊後的下一張圖片：

的ID是名稱不同（形容對每個不同的情節div當然），但是在定位上是相同的，如下面相關的CSS所示。

相關CSS：

#placeholder_one{ 
    margin-top:70px; 
    margin-left:auto; 
    margin-right:auto; 
    width:80%; 
    height:350px; 
    position:relative; 
} 
#placeholder_two{ 
    margin-top:70px; 
    margin-left:auto; 
    margin-right:auto; 
    width:80%; 
    height:350px; 
    position:relative; 
    display:none; 
} 
#placeholder_three{ 
    margin-top:70px; 
    margin-left:auto; 
    margin-right:auto; 
    width:80%; 
    height:350px; 
    position:relative; 
    display:none; 
} 

的HTML：

<div class="basic_form"> 
     <span id="title"> 
       Spectra 
     </span> 

     <div id="placeholder_one"></div> 
     <div id="placeholder_two"></div> 
     <div id="placeholder_three"></div> 

     <a href= "#" onclick="move('fwd');"><i id="nav_next" class="icon-double-angle-right about_nav"></i></a> 
     <a href= "#" onclick="move('rev');"><i id="nav_rev" class="icon-double-angle-left about_nav"></i></a> 
    </div> 

終於爲參考，使用Javascript。首先是一個簡單的導航結構，第二個腳本是在繪圖實際發生：

<script type="text/javascript"> 
    var currentCount = 1; 

    function safeCount(op){ 
     if (op == "add"){ 
      if (currentCount>=3){ 
       ; 
      } 
      else{ 
       currentCount = currentCount+1; 
      } 
     } 
     if (op == "sub"){ 
      if (currentCount<=1){ 
       ; 
      } 
      else{ 
       currentCount = currentCount-1; 
      } 
     } 
    } 

    function divSelector(count){ 
     if (count == 1){ 
        $('#placeholder_one').fadeIn(1000); 
        $('#placeholder_two').hide(); 
        $('#placeholder_three').hide(); 
       }else if (count == 2){ 
        $('#placeholder_one').hide(); 
        $('#placeholder_two').fadeIn(1000); 
        $('#placeholder_three').hide(); 
       }else if (count == 3){ 
        $('#placeholder_one').hide(); 
        $('#placeholder_two').hide(); 
        $('#placeholder_three').fadeIn(1000); 
        } 
     else{ 
      console.log("Count is nothing."); 
     } 
    } 


    //Navigating: pass in "fwd" or "rev" 
    function move(direction){  
     if (direction == "fwd"){ 
      safeCount("add"); 
      divSelector(currentCount); 
     } 
     else if (direction =="rev"){ 
      safeCount("sub"); 
      divSelector(currentCount); 
     } 
     else{ 
      ; 
     } 
    } 
</script> 
<script type="text/javascript"> 
$(function() { 

    function plotList(string_id, data_list){ 
     $.plot(string_id, [{data:data_list, 
          lines: { show: true }, 
          points: { show: false }, 
          }], 
          { 
          xaxes: [{position:'bottom',axisLabel:'T(s)'}], 
          yaxes: [{position:'left',axisLabel:'Proper Acceleration (g)'}], 
          grid:{hoverable:true,color:'white',clickable:true} 
          }); 
    } 

$(document).ready(function() { 
    var test_one = [[0,0],[4,3]];var test_two = [[0,0],[4,3]];var test_three = [[0,0],[4,3]]; 
    plotList("#placeholder_one",test_one); 
    plotList("#placeholder_two",test_two); 
    plotList("#placeholder_three",test_three); 
    }); 
}); 


</script> 

任何輸入，我怎麼能去糾正這將是極大的讚賞

Answer 1

海軍報與繪製圖表的問題在容器中設置爲display:none。因此，您可以延遲呼叫$.plot，直到容器可見，或者您可以使用負邊距讓它在屏幕外，繪圖，然後讓您的divSelector將它們移動到屏幕上。

如果你只是推遲該地塊直到divSelector想向他們展示，你就會有這樣的事情：

function divSelector(count) { 
     if (count == 1) { 
      $('#placeholder_one').fadeIn(1000); 
      $('#placeholder_two').hide(); 
      $('#placeholder_three').hide(); 
     } else if (count == 2) { 
      $('#placeholder_one').hide(); 
      $('#placeholder_two').show(); 
      if ($('#placeholder_two').find('canvas').length == 0) { 
       plotList("#placeholder_two", test_two); 
      } 
      $('#placeholder_three').hide(); 
     } else if (count == 3) { 
      $('#placeholder_one').hide(); 
      $('#placeholder_two').hide(); 
      $('#placeholder_three').show(); 

      if ($('#placeholder_three').find('canvas').length == 0) { 
       plotList("#placeholder_three", test_three); 
      } 
     } else { 
      console.log("Count is nothing."); 
     } 
    } 

工作例如：http://jsfiddle.net/ryleyb/Q7T4y

如果您願意讓您的衰沒有什麼，你可以使用保證金的事情打造的劇情裏戲外是這樣的：

plotList("#placeholder_one", test_one); 
    $('#placeholder_two,#placeholder_three').css({ 
     'margin-left': '-1000px', 
     display: 'block' 
    }); 
    plotList("#placeholder_two", test_two); 
    plotList("#placeholder_three", test_three); 
    $('#placeholder_two,#placeholder_three').css({ 
     'margin-left': 'auto', 
     display: 'none' 
    }); 

工作例如：http://jsfiddle.net/ryleyb/Q7T4y/1/