Доброго всем дня. Подскажите как реализовать плавную смену изображений.
Есть 4 изображения: первые две - уменьшенные миниатюры вторых. При клике на миниатюры изменяются большие изображения. Но сейчас меняются резко. Как добавить плавности в этот процесс?
Немного кода
html
<img src="img/p1.png" class="n_p_1" alt="" />(уменьшенное изображение)
<img src="img/p2.png" class="n_p_2" alt="" />(уменьшенное изображение)
<img src="img/p1.png" class="f_p_1" alt="" />(100% изображение)
<img src="img/p2.png" class="f_p_2" alt="" />(100% изображение)
js
$(".n_p_1").click(function(){
$(".f_p_1").show();
$(".f_p_2").hide();
});
$(".n_p_2").click(function(){
$(".f_p_2").show();
$(".f_p_1").hide();
});
и css
.f_p_2, {
display: none;
}