2011-04-28 85 views
0

我的文檔加載時,此請求:jQuery的CSS DIV圖像不會出現

jQuery(window).load(
     function(){ 

     $('#container img').animate({"opacity": 1}); 

     $('#container img').hover(function() { 
      $(this).stop().animate({ "opacity": .5 }); 
     }, function() { 
      $(this).stop().animate({ "opacity": 1 }); 
     }); 

      setTimeout(
       function(){ 
        window.scrollTo(0, 0); 
       }, 
       50 
      ); 

     } 
    ); 

這個if語句,我會增加,當我得到的東西正常工作:

function touchMove(event) { 
event.preventDefault(); 
if ((event.touches.length === 1) && (swipeDirection === 'down') && (swipeLength >= 90) && (swipeLength <= 120)) { 
    curX = event.touches[0].pageX; 
    curY = event.touches[0].pageY; 
    ('1.png').hover(function() { 
     $(this).stop().animate({ 
      "opacity": '1' 

     }); 

而這個CSS:

<style> 
     #container { 
      background: transparent; 
      left: 5px; 
      top: 20px; 
      position: relative; 
      border: 1px dotted #ddd; 

     } 
</style> 

然後這個在身體:

<div id="swipe-frame" class="swipe-element" ontouchstart="touchStart(event,'swipe-frame');" ontouchend="touchEnd(event);" ontouchmove="touchMove(event);" ontouchcancel="touchCancel(event);" style="width:100%; height:100%; background: transparent; -webkit-user-select: none;padding-top:128px;"> 
</div> 

    <div id="container"> 
    <img src="1.png" alt="image" /> 
    <img src="2.png" alt="image" /> 
    <img src="3.png" alt="image" /> 
    <img src="4.png" alt="image" /> 
    <img src="5.png" alt="image" /> 
</div> 

因爲我試圖加載5個圖像在彼此的頂部,使它看起來好像他們是一個圖像。文檔加載時它們變灰。然後,當用戶在圖像上滑動手指時,圖像被激活爲正常狀態。但沒有出現。有誰知道爲什麼? http://tinyurl.com/62hakh2感謝您的期待。

回答

0

嘗試從#swipe-frame DIV取出height:100%,因爲這會令DIV佔據整個屏幕,只是它後#container格會。

+0

當我從高度和寬度中刪除100%沒有出現。只是一個白色的屏幕。 – dmccallum 2011-04-28 23:31:59

0

如果您嘗試將圖像彼此放在一起,您需要爲它們應用樣式,而不僅僅是它們的容器。嘗試:

#container img { 
    background: transparent; 
    left: 5px; 
    top: 20px; 
    position: relative; 
    border: 1px dotted #ddd;  
    }