jQuery的動畫不工作時，DIV是在它

我有我試圖動畫圖像的列表：jQuery的動畫不工作時，DIV是在它

<div id = "photoHolderSolutions" class = "PhotoHolder"> 
    <ul id = "solutionsPhotoList" class = "PhotoList"> 
    </ul> 
</div>

有了這個CSS：

/* 
* Div containing the list of photos 
*/ 
.PhotoHolder 
{ 
    position: absolute; 
    top: 559px; 
    left: 57px; 
    float: left; 
    height: 70px; 
} 

    /* 
    * List of photos for each video 
    */ 
    .PhotoList  
    { 
     height: 70px; 
     margin: 0px; 
     padding: 0; 
    } 

     .PhotoList li 
     { 
      list-style-type: none; 
      float: left; 
      margin: 0 5px 0 5px; 
     }

列表項通過JavaScript創建動畫工作正常。我還通過javascript設置了所有width值（.PhotoHolder和.PhotoList）作爲所有圖像的寬度。我想要隱藏將要動畫的額外項目。所以我這樣做：

<div id = "topPhotoWindowSolutions" class = "TopPhotoWindow"> 
     <div id = "photoHolderSolutions" class = "PhotoHolder"> 
      <ul id = "solutionsPhotoList" class = "PhotoList"> 
      </ul> 
     </div> 
    </div> 

.TopPhotoWindow 
{ 
    position: absolute; 
    top: 559px; 
    left: 57px; 
    float: left; 
    height: 70px; 
    width: 420px; 
    overflow: hidden; 
}

假設TopPhotoWindow是，將持有的所有圖像的容器，使用設置heightwidth和overflow: hidden將使只有我想表現了，而較低的DIV .PhotoList通過滾動的圖像。（取決於我如何工作CSS）A）所有動畫停止，沒有任何反應（它通過正確的方法，但不移動）或B）（與這個CSS例子發生）所有動畫圖像消失）

建議？

來源

2011-05-12 Stanley Cup Phil

你能的jsfiddle這個例子嗎？ – Detect 2011-05-12 17:36:48

是的，讓我看看我是否可以快速重新創建它 – 2011-05-12 17:38:04

.TopPhotoWindow已經放置在top: 559px和left: 57px

請記住.PhotoHolder是INSIDE的.TopPhotoWindow

因爲.TopPhotoWindow高度爲70像素，.PhotoHolder頂部設置爲559px意味着其.TopPhotoWindow股利...這是overflow:hidden之外，所以這就是爲什麼它沒有顯示出來。

來源

2011-05-12 17:57:48 vinhboy

是的，我只是注意到了..設置'.PhotoHolder'爲'頂部：0;左：0;'固定起來 – 2011-05-12 18:06:06

建議：

變化位置相對於上.PhotoHolder
嘗試修改.PhotoHolder .PhotoList的CSS而不使用TopPhotoWindow HTML/CSS

來源

2011-05-12 17:36:22 Detect

jQuery的動畫不工作時，DIV是在它

回答

相關問題