проблемы с JQuery тусклом эффектом

Question

Я пытаюсь получить тусклый эффект, когда небольшое изображение щелкнуло и показать увеличенное изображение,

<div id="main_content"> 
    <div id="press_page">  
     <div id="press_images"> 
      <img id="s1" class="small" src="images/press/small/press1.jpg" /> 
      <img id="s2" class="small" src="images/press/small/press2.jpg" /> 


      <img id="b1" class="big" src="images/press/big/press1.jpg" /> 

     </div> 
     </div> 
    </div> 




$(function() { 

      $('#s1').click(function() { 
       $('#main_wrapper').animate({opacity:0.1},1000); 
       $('img.big').animate({opacity:1},1000).css('display','block'); 
      }); 

}); 

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

любая помощь будет оценена.

благодаря

Answer 1

Я думаю, что лучший подход заключается в создании наложения. Что-то вроде:

#overlay { 
    position: absolute; 
    display: none; 
    z-index:100; 
    top: 0px; 
    left: 0px; 
    height:100%; 
    width:100%; 
    background: #000; 
} 

Анимация от непрозрачности 0 до 0,8 или что-то еще, а затем показать большое изображение над ним.

img.big { 
    position: absolute; 
    z-index: 101; 
    top:50%; 
    left:50%; 
    margin-top: - (height of image/2) 
    margin-left: - (width of image/2) 
} 

Есть много good tutorials о том, как соединить это с некоторым взаимодействием JQuery.

Answer 2

Поместите анимацию большой картины в обратном вызове функции одушевленного для диммера, так что происходит после того, как происходит затемнение.

$('#main_wrapper').animate({opacity:0.1}, 1000, function() { 
    $('img.big').animate({opacity:1},1000).css('display','block'); 
}); 

Answer 3

AFAIK, вы не можете заставить родительский элемент DOM иметь определенную непрозрачность, не делая свои дочерние элементы также непрозрачностью.

Ваш код в настоящее время устанавливает opactiy родительского div равным 10%, а затем устанавливает непрозрачность изображений на 100% от THAT 10% - т.е. как и другие изображения.

Я думаю, что простым решением было бы выполнить выбор на классе. Остальные изображения в вашем DIV есть класс, называемый «маленький», так почему бы не просто написать:

$(document).ready(function(){ 

     $('#s1').click(function() { 

        $('.small').animate({opacity:0.1},1000); 

      }); 

    }); 

Answer 4

Непрозрачность является одним из немногих CSS свойств, которые не пропагандируют, как можно было бы ожидать.

Простейшим решением является либо настройка только небольших изображений, либо перемещение в большое изображение за пределами его родительского контейнера.