Плавная смена background-image div-ва в котором есть контент
Каким образом можно сделать плавную смену фонового изображения (что то по типу затухание и появление)div-а, внутри которого есть различное содержимое (текст, блоки различные,вложенные превьюшки для картинок).Спасибо!
Фон меняю по обычному таким образом:
$(function(){
// позиция на 1-й картинке
var cur = 1;
// если кликнули на превьюшку
$(".movie_ext").click(function(){
// получаем атрибут прьвьюшки
cur = $(this).attr("movie-id");
// ищем вложеный img и получаем у него путь к меленькой картирке
var cur_backrg = $(this).children().children().attr("src");
// формируем новый путь, при этом заменяем в пути small на big (название папок в которой лежат картинки большие и маленькие)
cur_backrg = cur_backrg.replace("small", "big");
// меняем фон
// вот здесь хотелось бы что бы фон менялся как то плавно а не сразу
// пробовал методы fadeIn/fadeOut но содержимое внутри класса main_image (текст,другие блоки) тоже анимируются...
$('.main_image').css({'background-image': 'url(' + cur_backrg + ')', });
// устанавливаем рамку для превьюшек
$('div.movie_ext').each(function(i) {
if($(this).hasClass('selected'))
$(this).removeClass();
$(this).addClass("movie_ext");
});
$(this).removeClass(".movie_ext");
$(this).addClass(".movie_ext selected");
});
// смена фона по интервалу
setInterval(function() {
cur++;
if(cur > $('.movie_ext').size())
cur = 1;
$('div.movie_ext').each(function(i) {
if($(this).hasClass('selected'))
$(this).removeClass();
$(this).addClass("movie_ext");
});
$("div").find("[movie-id='" + cur + "']").addClass(".movie_ext selected");
var segment_contr = "<?=$this->uri->segment(2)?>";
$('.main_image').css({'background-image': 'url(/images/big/' + segment_contr + '/0' + cur + '.jpg)', });
}, 5000);
// когда клацаем на плюсе для смена следующей картинки в прьевьюшке
$(".movie_ext_no_min").click(function(){
cur--;
if(cur <= 0)
cur = $('.movie_ext').size();
$('div.movie_ext').each(function(i) {
if($(this).hasClass('selected'))
$(this).removeClass();
$(this).addClass("movie_ext");
});
$("div").find("[movie-id='" + cur + "']").addClass(".movie_ext selected");
var segment_contr = "<?=$this->uri->segment(2)?>";
$('.main_image').css({'background-image': 'url(/images/big/' + segment_contr + '/0' + cur + '.jpg)', });
});
// когда клацаем на плюсе для смена предыдущей картинки в прьевьюшке
$(".movie_ext_no_plus").click(function(){
cur++;
if(cur > $('.movie_ext').size())
cur = 1;
$('div.movie_ext').each(function(i) {
if($(this).hasClass('selected'))
$(this).removeClass();
$(this).addClass("movie_ext");
});
$("div").find("[movie-id='" + cur + "']").addClass(".movie_ext selected");
var segment_contr = "<?=$this->uri->segment(2)?>";
$('.main_image').css({'background-image': 'url(/images/big/' + segment_contr + '/0' + cur + '.jpg)', });
});
});
|