Как исчезнуть при смене фонового изображения - PullRequest
Новая
       14

Как исчезнуть при смене фонового изображения

45 голосов
/ 15 февраля 2011

Я хочу поблекнуть изображения, когда я делаю этот код: 

$("#large-img").css('background-image', 'url('+$img+')');

Я пытался положить исчезновение во многих местах.

Спасибо

Ответы [ 8 ]

74 голосов
/ 15 февраля 2011

Это, вероятно, то, что вы хотели: 

$('#elem').fadeTo('slow', 0.3, function()
{
    $(this).css('background-image', 'url(' + $img + ')');
}).fadeTo('slow', 1);

с задержкой в ​​1 секунду: 

$('#elem').fadeTo('slow', 0.3, function()
{
    $(this).css('background-image', 'url(' + $img + ')');
}).delay(1000).fadeTo('slow', 1);
55 голосов
/ 11 июня 2012

Могу ли я предложить альтернативное решение?

У меня была такая же проблема, и исчезновение не сработало, потому что исчезло все элементы, а не только фон. В моем случае элемент был body, поэтому я хотел только убрать фон.

Элегантный способ решить эту проблему - классифицировать элемент и использовать CSS3-переход для фона.

transition: background 0.5s linear;

Когда вы изменяете фон, либо с помощью toggleClass, либо с вашим кодом, $("#large-img").css('background-image', 'url('+$img+')'); он исчезает, как определено классом.

21 голосов
/ 19 апреля 2014

Это была единственная разумная вещь, которую я нашел, чтобы исчезнуть фоновое изображение. 

<div id="foo">
  <!-- some content here -->
</div>

Ваш CSS; теперь улучшено с CSS3 переходом . 

#foo {
  background-image: url(a.jpg);
  transition: background 1s linear;
}

Теперь поменяйте фон 

document.getElementById("foo").style.backgroundImage = "url(b.jpg)";

Вуаля, оно угасает!

Очевидный отказ от ответственности: , если ваш браузер не поддерживает свойство CSS3 transition, это не будет работать. В этом случае изображение изменится без перехода. Учитывая, что <1% браузера ваших пользователей не поддерживает CSS3, это, вероятно, хорошо. Не обманывай себя, все в порядке.

6 голосов
/ 07 октября 2013

Основываясь на вышеупомянутом решении Rampant Creative Group, я использовал jQuery для изменения фонового изображения тега body:

, например 

$('body').css({'background': 'url(/wp-content/themes/opdemand/img/bg-sea.jpg) fixed', 'background-size': '100% 100%'});

$('body').css({'background': 'url(/wp-content/themes/opdemand/img/bg-trees.jpg) fixed', 'background-size': '100% 100%'});

У меня был таймер JavaScript, который переключался между двумя операторами.

Все, что мне нужно было сделать, чтобы решить проблему создания эффекта fadeOut -> fadeIn, - воспользоваться предложением Rampant Creative Group и добавить 

transition: background 1.5s linear;

к моему коду. Теперь оно красиво исчезает.

Спасибо Rampant Creative Group и SoupEnvy за редактирование !!

1 голос
/ 19 мая 2015

Кто-то указал мне на эту тему, потому что у меня была такая же проблема, но она не работала для меня.После нескольких часов поиска я нашел решение, используя это - https://github.com/rewish/jquery-bgswitcher#readme

У него есть несколько других опций, кроме fade.

0 голосов
/ 15 февраля 2011

Это может помочь

HTML 

<div id="textcontainer">        
    <span id="sometext">This is some information </span>
    <div id="container">

    </div>
</div>

CSS 

#textcontainer{
    position:relative;
    border:1px solid #000;
    width :300px;
    height:300px;
}
#container{
    background-image :url("http://dcooper.org/gallery/cf_appicon.jpg");
    width :100%;
    height:100%;
}
#sometext{
    position:absolute;
    top:50%;
    left:50%;
}

JS 

$('#container').css('opacity','.1');
0 голосов
/ 15 февраля 2011

Если вы пытаетесь затемнить фоновое изображение, но оставляете текст / изображения на переднем плане, вы можете использовать css, чтобы разделить фоновое изображение на новый div и расположить его над div, содержащим текст / изображения, а затем исчезнуть фоновый div.*

0 голосов
/ 15 февраля 2011

Непрозрачность служит вашей цели?

Если это так, попробуйте это: 

$('#elem').css('opacity','0.3')
...