эффект затухания с использованием JavaScript

Question

Я пытаюсь создать галерею изображений, похожую на галерею anntaylor site

Я могу изменить основное изображение при наведении курсора мыши, изменив источник изображения.Вот код, который я применил.

 <div id="navimage1"><img src="p1.png" name="p1" alt="" width="100%" height="100%" onmouseover="document.mainimage.src='p1.png'" onLoad="qwe();"/></div>
 <div id="navimage2"><img src="p2.png" name="p2" alt="" width="100%" height="100%" onmouseover="document.mainimage.src='p2.png'" onLoad="qwe();"/></div>
 <div id="navimage3"><img src="p3.png" name="p3" alt="" width="100%" height="100%" onmouseover="document.mainimage.src='p3.png'" onLoad="qwe();"/></div>
 <div id="navimage4"><img src="p4.png" name="p4" alt="" width="100%" height="100%" onmouseover="document.mainimage.src='p4.png'" onLoad="qwe();"/></div>
 <div id="viewpoint"><img src="p1.png" name="mainimage" alt=""  /></div>

CSS для приведенного выше кода:

#viewpoint { top: 180px; width: 60%; left:30%; right:0; height: 720px; position: absolute;}
#navimage1 { left:10%; width:20%; height:180px; top: 180px; position: absolute;}
#navimage1:hover {background-color: #6d6767;}
#navimage2 { left:10%; width:20%; height:180px; top: 360px; position: absolute;}
#navimage2:hover {background-color: #6d6767;}
#navimage3 { left:10%; width:20%; height:180px; top: 540px; position: absolute;}
#navimage3:hover {background-color: #6d6767;}
#navimage4 { left:10%; width:20%; height:180px; top: 720px; position: absolute;}
#navimage4:hover {background-color: #6d6767;}

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

Answer 1

jQuery с методами fadeIn (http://api.jquery.com/fadeIn/) и fadeOut (http://api.jquery.com/fadeOut/) должен работать у вас

)

Answer 2

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

<div id="slides">
    ...
    <img src="..." class="trans prev" data-id="image1" />
    <img src="..." class="trans shown current" data-id="image2" />
    <img src="..." class="trans next" data-id="image3" />
    ...
</div>

Затем в CSS я использую переходы CSS3, где класс .trans равен непрозрачности 0, а z-index равен 100, где для .trans.shown задана непрозрачность 1 с z-индексом 200.

Javascript используется для извлечения текущего изображения, удаления «показанного» класса и обновления классов соответствующим образом ... .prev и .next устанавливают левую позицию на -100% и 100% соответственно.

Я также поддерживаю только текущее, предыдущее и следующее изображения в стеке ... другие изображения удаляются из DOM ... это делает вещи довольно легкими / быстрыми. В сочетании с плагином jquery.swipe для поддержки планшетов. Показывает ссылку на конечный продукт, но не будет до следующего месяца.

Answer 3

JQuery FadeIn - http://api.jquery.com/fadeIn/