Я хочу увязать изображения, когда я делаю этот код:
$("#large-img").css('background-image', 'url('+$img+')');
Я пробовал затухать во многих местах.
Спасибо
Я хочу увязать изображения, когда я делаю этот код:
$("#large-img").css('background-image', 'url('+$img+')');
Я пробовал затухать во многих местах.
Спасибо
Это, вероятно, то, что вы хотели:
$('#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);
Можно ли предложить альтернативное решение?
У меня была эта же проблема, и угасание не срабатывало, потому что оно угасло весь элемент, а не только фон. В моем случае элемент был телом, поэтому я хотел только угаснуть фон.
Элегантный способ справиться с этим - это классифицировать элемент и использовать переход CSS3 для фона.
transition: background 0.5s linear;
Когда вы меняете фон, либо с помощью toggleClass, либо с вашим кодом, $("#large-img").css('background-image', 'url('+$img+')');
он будет исчезать, как определено классом.
Это была единственная разумная вещь, которую я нашел, чтобы увянуть фоновое изображение.
<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, возможно, это хорошо. Не обманывай себя, это прекрасно.
Основываясь на решении Rampant Creative Group выше, я использовал jQuery для изменения фонового изображения тега тела:
например.
$('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 за редактирование!
Непрозрачность служит вашей цели?
Если да, попробуйте следующее:
$('#elem').css('opacity','0.3')
Если вы пытаетесь пометить фоновое изображение, но оставите текст/изображения переднего плана, вы можете использовать css для разделения фонового изображения на новый div и поместить его над div, содержащим текст/изображения, затем затухайте фоном div.
Это может помочь
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');
Кто-то указал мне на эту тему, потому что у меня была такая же проблема, но она не работала для меня. После нескольких часов поиска я нашел решение, используя это - https://github.com/rewish/jquery-bgswitcher#readme
У него есть несколько других опций, кроме выцветания.