Como se desvanecer mudando a imagem de fundo

Eu quero desvanecer as imagens quando faço este código:

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

Eu tentei colocar o fade em muitos lugares.

obrigado

Isto é provavelmente o que você queria:

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

Com um atraso de 1 segundo:

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

Posso oferecer uma solução alternativa?

Eu tive esse mesmo problema, e o fade não funcionou porque ele desbotou todo o elemento, não apenas o plano de fundo. No meu caso, o elemento era corpo, então eu só queria desbotar o fundo.

Uma maneira elegante de resolver isso é classificando o elemento e usando a transição CSS3 para o plano de fundo.

transition: background 0.5s linear;

Quando você muda o fundo, com toggleClass ou com seu código, $("#large-img").css('background-image', 'url('+$img+')'); ela desaparecerá conforme definido pela class.

Esta foi a única coisa razoável que encontrei para desvanecer uma imagem de fundo.

 

Seu CSS; agora aprimorado com a transição do CSS3 .

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

Agora troque o plano de fundo

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

Voilà, desvanece-se!


Aviso de isenção óbvia: se o seu navegador não suportar a propriedade de transition do CSS3, isso não funcionará. Nesse caso, a imagem será alterada sem uma transição. Dado que <1% do navegador dos seus usuários não é compatível com CSS3, provavelmente está tudo bem. Não se engane, tudo bem.

Com base na solução Rampant Creative Group acima, eu estava usando o jQuery para alterar a imagem de plano de fundo da tag body:

por exemplo

 $('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%'}); 

Eu tinha um timer de javascript que alternava entre as duas declarações.

Tudo o que eu tive que fazer para resolver o problema de criar um efeito fadeOut -> fadeIn foi usar a sugestão do Rampant Creative Group e adicionar

 transition: background 1.5s linear; 

para o meu código. Agora desaparece e lindamente.

Obrigado Rampant Creative Group e SoupEnvy pela edição !!

Alguém me indicou esse tópico porque eu tive esse mesmo problema, mas não funcionou para mim. Depois de horas de pesquisa, encontrei uma solução usando isso – https://github.com/rewish/jquery-bgswitcher#readme

Tem algumas outras opções além de desaparecer.

Opacidade serve o seu propósito?

Em caso afirmativo, tente isto:

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

Se você tentar diminuir a imagem de fundo, mas deixar o texto / imagens em primeiro plano, pode usar o css para separar a imagem de fundo em uma nova div e posicioná-la sobre a div que contém o texto / imagens e depois desvanecer a div.

Isso pode ajudar

HTML

 
This is some information

CSS

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

Js

 $('#container').css('opacity','.1'); 
    Intereting Posts