Удаление фонового изображения с анимацией

У меня есть div с background-image. При нажатии на кнопку изображение должно исчезнуть (и снова затухать при нажатии другой кнопки). Таким образом, только background-image должен исчезать, а не контент.Удаление фонового изображения с анимацией

Как достичь этого эффекта? Я пробовал jQuery's animate(), но это не работает. Я не могу заставить CSS-переходы работать, также opacity, похоже, делает весь контент прозрачным.

Fiddle

источник

2016-01-26 Duncan Luk

Это кажется достаточно легко решить. Не могли бы вы показать нам, что у вас уже есть? – Llewellyn1411

Вы пытались настроить таргетинг на элемент фона, связанный с элементом div, и используя функцию click() в сочетании с fadeOut() (и, возможно, fadeIn())? – MathBio

@MathBio Я думаю, что мой вопрос был неясным, я уточнил это. –

Я думаю, что единственный способ, которым Вы могли бы исчезнуть фоновое изображение, чтобы поместить его в отдельный DIV и затухают, что:

$('.fade').on('click', function() { 
 
    $('.background').fadeToggle(); 
 
});

.container { 
 
    position: relative; 
 
} 
 
.background { 
 
    position: absolute; 
 
    z-index: -1; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    background: url(http://lorempixel.com/800/800/city/1/) left top no-repeat; 
 
    background-size: cover; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="background"></div> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id diam ac dolor gravida ultricies. Sed pretium, orci at pharetra placerat, velit mauris posuere mauris, et ornare libero ligula tristique enim. Etiam vitae lobortis erat, ut volutpat ipsum. 
 
    Suspendisse potenti. 
 
</div> 
 
<div class="fade">fade toggle</div>

Update

Вы можете использовать переход css слишком выцветанию в прозрачный PNG:

$('.background').click(function() { 
 
    $(this).toggleClass('blank') 
 
})

.background { 
 
    width: 400px; 
 
    height: 400px; 
 
    background: url(http://lorempixel.com/400/400/city/1/) left top no-repeat; 
 
    transition: background-image 0.5s; 
 
} 
 

 
.background.blank { 
 
    background: url(http://i.imgur.com/qkeOXbO.png) left top no-repeat; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="background"> 
 

 
</div>

источник

2016-01-26 09:35:22 Pete

Это тоже хороший способ, хотя CSS3 «переход» имеет меньшую поддержку браузера, поэтому я предпочитаю первое решение. –

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

Я создал скрипку для вас, чтобы увидеть https://jsfiddle.net/bx0dt60a/

JS фрагмент кода ниже

$('#fadeOut').click(function(){ 
 
\t $('#background').fadeOut(500); 
 
}); 
 

 
$('#fadeIn').click(function(){ 
 
\t $('#background').fadeIn(500); 
 
});

.container { 
 
    width: 500px; 
 
    height: 500px; 
 
    background-color: red; 
 
} 
 

 
.background { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-image: url('http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id"container" class="container"> 
 
    <div id="background" class="background"></div> 
 
</div> 
 

 
<div id="fadeOut"> 
 
    fade out 
 
</div> 
 
<div id="fadeIn"> 
 
    fade in 
 
</div>

источник

2016-01-26 09:38:12 Llewellyn1411

Удаление фонового изображения с анимацией

ответ

Смежные вопросы