jQuery的：佈局問題，當負載和動畫頁面

Question

我不能修復小時後this problem - 網頁時通過jquery.load加載，文本框下降，並向左移動圖像旁邊時，我使用jquery.animate使滑動從左到右的影響。文本灰色框不應該丟失，因爲我已將它設置爲在css中左移。

這裏是jQuery的，

$('.block-item').click(function(){ 

     $('#container-article').remove(); 

     // Create a div after the parent clicked element. 
     $(this).after('<div id="container-article"></div>'); 

     // Set the div to a variable and set its css. 
     var container_article = $('#container-article').css({ 
      float:'left', 
      width:0 
      }); 

     // Load the article into container_article. 
     container_article.load('article-3.php', function(){ 
      $(this).animate({ 
       width:800 
      },500); 
     }); 

     return false; 
    }); 

的CSS，

.block-item { 
    width:50px; 
    height:500px; 
    display:block; 
    float:left; 
    background:#fff; 
    overflow:hidden; 
    cursor:pointer; 
    border:1px solid #000; 
    } 

#article-content { 
    width:500px; 
    height:500px; 
    background:#ccc; 
    overflow:hidden; 
    } 

#image-content { 
    float:left; 
    } 

的HTML，

<div class="block-item"></div> 
<div class="block-item"></div> 
<div class="block-item"></div> 
<div class="block-item"></div> 
<div class="block-item"></div> 
<div class="block-item"></div> 
<div class="block-item"></div> 

加載頁面，

<!-- binder-article --> 
<div id="binder-article"> 

<div id="image-content"><img src="pic-2.jpg"/></div> 

<!-- article-right --> 
<div id="article-content"> 

    <p>In Kaduna in Nigeria, a hotbed of Christian-Muslim conflict, Imam Ashafa and Pastor James led warring militias against each other. In pitched battles, Imam Ashafa's cousing was killed and Pastor James' hand was cut off. Ready to kill each other, they were suddenly overwhelmed by the power of their faith. Now best friends, they lead interfaith efforts in Nigeria and across the world. This film shares their amazing story...</p> 
    <p>In Kaduna in Nigeria, a hotbed of Christian-Muslim conflict, Imam Ashafa and Pastor James led warring militias against each other. In pitched battles, Imam Ashafa's cousing was killed and Pastor James' hand was cut off. Ready to kill each other, they were suddenly overwhelmed by the power of their faith. Now best friends, they lead interfaith efforts in Nigeria and across the world. This film shares their amazing story...</p> 

</div> 
<!-- article-right --> 

</div> 

我該如何解決它？

或者其他比animate更好的jquery功能？

謝謝。

Answer 1

你需要把你的塊項在父容器，並設置父容器的寬度......像這樣：

<div id="parent_container"> 
    <div class="block-item"></div> 
    <div class="block-item"></div> 
    <div class="block-item"></div> 
    <div class="block-item"></div> 
    <div class="block-item"></div> 
    <div class="block-item"></div> 
    <div class="block-item"></div> 
</div> 

和一些CSS

#parent_container { 
width:1165px; 
} 

如果塊項目的數量是動態的，你可以在文檔準備好的時候用jQuery對它們進行計數，並將它們的數量乘以50px（或者它們的寬度），然後添加容器文章的寬度800px（或者寬度是），然後設置父容器的寬度。

Answer 2

阿 - 確定 - 我看到你的問題，然後...
而不是浮動的粘合劑技術的內容，儘量把它們設置爲inline-block的同父NOWRAP ...

所以，你提供你的CSS應替換爲以下（這應該做的伎倆）：

.block-item { 
    width:50px; 
    height:500px; 
    display:block; 
    float:left; 
    background:#fff; 
    overflow:hidden; 
    cursor:pointer; 
    border:1px solid #000; 
    } 

#article-content { 
    width:500px; 
    height:500px; 
    background:#ccc; 
    overflow:hidden; 
    } 

#image-content { 
    } 

#parent_container { 
    width:1165px; 
    } 

#binder-article > #image-content, 
#binder-article > #article-content { 
    display:inline-block; 
    vertical-align:top; 
    } 

#binder-article { 
    white-space:nowrap; 
    } 

（此作品在這種情況下，因爲元素直接在「＃粘合劑文章」都是div的，而不是不同的情況下，內容可能不在任何容器中）