$(document).ready(function() {
$('.main .block .smena').toggle(
function() {
$('.fon').fadeOut('slow', function() {
$('.fon').css({background:'url("images/fon2.jpg")'}).fadeIn('slow');
});
},
function() {
$('.fon').fadeOut('slow', function() {
$('.fon').css({background:'url("images/fon1.jpg")'}).fadeIn('slow');
});
}
);
});
Написал скрипт смены фона контента. Все работает следующим образом, при клике на кнопку фон плавно исчезает и плавно появляется новый. При повторном клике снова исчезает и появляется первоначальный. Все ок, но вопрос как мне сделать так, чтобы при клике у меня просто поверх первоначального плавно появлялся новый, без эффекта исчезновения предыдущего. Пытался играть просто FadeIn по типу
$('.fon').fadeIn('slow').css({background:'url("images/fon1.jpg")'});
или
$('.fon').fadeIn('slow', function() {
$('.fon').css({background:'url("images/fon2.jpg")'});
});
и прочие варианты. Эффект тот же, картинка появляется не плавно, а сразу (:
Без какого либо плавного появления.
Конечно можно было бы просто тупо через css на абсолютном позиционировании расположить два фона, и потом через скрипт менять прозрачность, но если картинок 3 и более, не вариант. тем более что планирую на разные кнопки.
Спасибо