JQuery Div фон Fadein - PullRequest
Новая
       8

JQuery Div фон Fadein

0 голосов
/ 21 октября 2009

У меня есть следующая HTML-страница: 

<body>
    <div class="hide1" style="width:1000px; height:1000px;">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td colspan="2" align="center">Heading</td>
        </tr>
        <tr>
          <td width="51%">Left1</td>
          <td width="49%">right 1 </td>
        </tr>

        <tr>
          <td>Left 2 </td>
          <td>right 2 </td>
        </tr>
    </table>
    </div>
</body>

Класс hide1: 

<style>
.hide1 {
  background: url(back.png) no-repeat;
}
</style>

и JQUERY функция: 

<script>
 $(document).ready(function(){
 $("div.mover").click(function () {
 $("div.hide1").fadeTo("slow", 0.33);
 });
 });
</script>

Моя проблема в том, что вся страница исчезает. Но я только хочу исчезнуть фоновое изображение div. Как я могу это сделать?

Ответы [ 2 ]

0 голосов
/ 21 октября 2009

Вы не можете применить непрозрачность CSS только к фоновому изображению элемента.

У вас должно быть два элемента, один из которых содержит фоновое изображение (которое вы можете исчезнуть), а другой - содержимое без затухания. Затем вы размещаете их друг над другом, используя CSS Positioning.

Это может быть сложно, если высота элемента содержимого заранее не известна, так как вам нужно сделать фоновый элемент такой же высоты; в этом случае вам может понадобиться комбинация абсолютного позиционирования и резервного копирования скрипта для IE6.

0 голосов
/ 21 октября 2009

Как насчет добавления еще одного div с фоновым изображением и исчезновения только этого?

Что-то вроде: 

<div class="wrapper">
  <div class="image">
    //FADE THIS
  </div>
  <div class="content">
    // DON'T FADE THIS
  </div>
</div>

Вы можете использовать абсолютное позиционирование для внутренних элементов.

...