像素和瀏覽器與我的jQuery效果輕微問題

爲了突出顯示某個p元素，我寫了一些JS使它出現在黑暗的背景之上。像素和瀏覽器與我的jQuery效果輕微問題

爲了做到這一點，我使用jQuery創建一個覆蓋圖，然後克隆信息p元素並將其絕對定位在覆蓋圖上。

因爲它放棄了一些CSS屬性（由於頁面中的新位置而未被繼承），所以我使用jQuery來添加它們。

它的工作原理幾乎完美。在Mac OS X的Firefox 3.5.6中，當它消失時，像素問題會有輕微的失真。我知道這是挑剔的，但我希望它消失，最終用戶不知道其中的差異。

測試可以在這裏找到：https://www.ikatanspa.com/book-online/?test

這裏是jQuery的功能太

var highlightFormSuccess = function() { 

    var fadeTo = 0.6; 

    var $info = $('p.information'); 

    if ($info.length) { 


     // make overlay 

     var $overlay = $('<div />') 
      .css({ 
       display: 'none', 
       width: '100%', 
       height: $(document).height(), 
       position: 'absolute', 
       top: 0, 
       left: 0, 
       zIndex: 32767, 
       opacity: 0 
      }) 
      .attr({ 
       id: 'overlay' 
      }) 
      .appendTo('body'); 

     // pull out success block and position above overlay 

     var left = $info.position().left, 
      top = $info.position().top, 
      fontSize = $info.css('font-size'), 
      width = $info.width(), 
      color = $info.css('color'), 
      lineHeight = $info.css('line-height'); 


     var $newInfo = $info.clone() 
          .css({ 
           position: 'absolute', 
           top: top, 
           left: left, 
           'font-size': fontSize, 
           'line-height': lineHeight, 
           width: width, 
           color: color, 
           zIndex: 32767 
          }) 
          .appendTo('body'); 

     $overlay 
     .show() 
     .fadeTo(1000, fadeTo); 
     // wait then fade back out 
     setTimeout(function() { 

      $($overlay, $newInfo).fadeOut(1000, function() { 
       $newInfo.fadeOut(250, function() { $(this).remove(); }); 
      }); 

     }, 2500); 


    }; 


};

來源

2010-01-06 alex

你能不其位置設置爲'relative'並給它一個比你的黑暗項目更高的「Z指數」？ – Sampson 2010-01-06 00:48:38

我會同意喬納森。似乎這是一個類似的CSS問題。同樣的事情發生在Safari上，但效果有點不同，只是爲了讓它更加惱人！ – jay 2010-01-06 00:55:31

@喬納森桑普森我從來沒有想到這一點！讓我試試看。如果它有效，你最好發表一個答案，以便我能接受。 – alex 2010-01-06 00:59:35

也許你可以讓事情變得更簡單。我只是複製我的款規則設置爲想要的效果：

p.highlight { 
    position:relative; 
    background-color:#ffffff; 
    z-index:10; 
}

而我的疊加：

div.overlay { 
    position:fixed; 
    background-color:#000000; 
    z-index:5; // lower than my paragraph, higher than all else 
    top:0; left:0; width:100%; height:100%; 
}

<body> 
    <div class="overlay"></div> 
    <p>I'm a paragraph.</p> 
    <p class="highlight">I too am a paragraph.</p> 
</body>

來源

2010-01-06 00:59:25 Sampson

非常感謝這個......我在2週休息後不會編碼hehe。 – alex 2010-01-06 01:05:03

像素和瀏覽器與我的jQuery效果輕微問題

回答

相關問題