Незначительная проблема с пикселями и браузером с моим эффектом jQuery

Чтобы выделить определенный элемент p, я написал несколько JS, чтобы они отображались над темным фоном.Незначительная проблема с пикселями и браузером с моим эффектом jQuery

Для этого я использовал jQuery для создания наложения, а затем клонировал элемент информации p и полностью позиционировал его поверх наложения.

Поскольку он потерял несколько свойств CSS (не унаследованных из-за новой позиции на странице), я использовал jQuery для их добавления.

Работает почти совершенно. В моем Firefox 3.5.6 на Mac OS X, когда он исчезает, есть небольшая неувязка вопроса о пикселях. Я знаю, что это nitpicking, но я бы хотел, чтобы он исчез, и конечный пользователь не знает разницы.

Тест доступен здесь: 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-index', чем ваш темный предмет? – Sampson

Я согласен с Джонатаном. Похоже, это какая-то проблема css. То же самое происходит в Safari, но эффект немного отличается, просто чтобы сделать его немного более раздражающим для вас! – jay

@ Джонатан Сампсон Я никогда не думал об этом! Позвольте мне попробовать. Если это сработает, вы лучше опубликуете ответ, чтобы я согласился. – alex

Может быть, вы можете сделать вещи немного проще. Я просто копировал желаемый эффект, установив свои правила абзаца на:

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-недельного перерыва хе-хе. – alex

Незначительная проблема с пикселями и браузером с моим эффектом jQuery

ответ

Смежные вопросы