Trocar background-image com delay via jQueryjQuery que troque background de div especificaProblema com delay em jqueryjQuery - Alternar background-image de um elementoComo trocar uma string com jQuery?GET image/gif com jQueryDelay de renderização com Angular + jQuerySubstituir background-image de :afterTrocar o nome da classe com jQueryMensagem com Delay no JQueryAnimate Delay com jquery
Trocar background-image com delay via jQuery
jQuery que troque background de div especificaProblema com delay em jqueryjQuery - Alternar background-image de um elementoComo trocar uma string com jQuery?GET image/gif com jQueryDelay de renderização com Angular + jQuerySubstituir background-image de :afterTrocar o nome da classe com jQueryMensagem com Delay no JQueryAnimate Delay com jquery
Estou tentando fazer uma transição de imagens de fundo via jQuery, com efeito fade-in e fade-out e trocando essa imagem, abaixo segue o meu código.
$(document).ready(function()
$("#player").delay(500).animate("opacity": "0", 1000);
$("#player").delay(1500).animate("opacity": "1", 1000);
$("#player").delay(1500).css('background-image': 'url("PLAYERS/ouro1.png")'); //linha com problema
);.image .player
height: 600px;
width: 380px;
background-image: url("PACKS/P4.jpg");
display: flex;
justify-content: center;
align-items: center;
opacity: 1;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image">
<div class="player" id="player">
</div>
</div>Do jeito que está a imagem de fundo simplesmente não troca, mas o efeito fade-in e fade-out funciona.
Se eu trocar o ".css(" por ".qcss(" como achei de solução em outro problema, a imagem troca no momento e não faz o delay.
jquery
editada 59 mins atrás
Sam
53,8mil113771
perguntada 1 hora atrás
Luan PeilLuan Peil
307
comentar |
Estou tentando fazer uma transição de imagens de fundo via jQuery, com efeito fade-in e fade-out e trocando essa imagem, abaixo segue o meu código.
$(document).ready(function()
$("#player").delay(500).animate("opacity": "0", 1000);
$("#player").delay(1500).animate("opacity": "1", 1000);
$("#player").delay(1500).css('background-image': 'url("PLAYERS/ouro1.png")'); //linha com problema
);.image .player
height: 600px;
width: 380px;
background-image: url("PACKS/P4.jpg");
display: flex;
justify-content: center;
align-items: center;
opacity: 1;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image">
<div class="player" id="player">
</div>
</div>Do jeito que está a imagem de fundo simplesmente não troca, mas o efeito fade-in e fade-out funciona.
Se eu trocar o ".css(" por ".qcss(" como achei de solução em outro problema, a imagem troca no momento e não faz o delay.
jquery
editada 59 mins atrás
Sam
53,8mil113771
perguntada 1 hora atrás
Luan PeilLuan Peil
307
comentar |
Estou tentando fazer uma transição de imagens de fundo via jQuery, com efeito fade-in e fade-out e trocando essa imagem, abaixo segue o meu código.
$(document).ready(function()
$("#player").delay(500).animate("opacity": "0", 1000);
$("#player").delay(1500).animate("opacity": "1", 1000);
$("#player").delay(1500).css('background-image': 'url("PLAYERS/ouro1.png")'); //linha com problema
);.image .player
height: 600px;
width: 380px;
background-image: url("PACKS/P4.jpg");
display: flex;
justify-content: center;
align-items: center;
opacity: 1;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image">
<div class="player" id="player">
</div>
</div>Do jeito que está a imagem de fundo simplesmente não troca, mas o efeito fade-in e fade-out funciona.
Se eu trocar o ".css(" por ".qcss(" como achei de solução em outro problema, a imagem troca no momento e não faz o delay.
jquery
editada 59 mins atrás
Sam
53,8mil113771
perguntada 1 hora atrás
Luan PeilLuan Peil
307
Estou tentando fazer uma transição de imagens de fundo via jQuery, com efeito fade-in e fade-out e trocando essa imagem, abaixo segue o meu código.
$(document).ready(function()
$("#player").delay(500).animate("opacity": "0", 1000);
$("#player").delay(1500).animate("opacity": "1", 1000);
$("#player").delay(1500).css('background-image': 'url("PLAYERS/ouro1.png")'); //linha com problema
);.image .player
height: 600px;
width: 380px;
background-image: url("PACKS/P4.jpg");
display: flex;
justify-content: center;
align-items: center;
opacity: 1;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image">
<div class="player" id="player">
</div>
</div>Do jeito que está a imagem de fundo simplesmente não troca, mas o efeito fade-in e fade-out funciona.
Se eu trocar o ".css(" por ".qcss(" como achei de solução em outro problema, a imagem troca no momento e não faz o delay.
$(document).ready(function()
$("#player").delay(500).animate("opacity": "0", 1000);
$("#player").delay(1500).animate("opacity": "1", 1000);
$("#player").delay(1500).css('background-image': 'url("PLAYERS/ouro1.png")'); //linha com problema
);.image .player
height: 600px;
width: 380px;
background-image: url("PACKS/P4.jpg");
display: flex;
justify-content: center;
align-items: center;
opacity: 1;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image">
<div class="player" id="player">
</div>
</div>$(document).ready(function()
$("#player").delay(500).animate("opacity": "0", 1000);
$("#player").delay(1500).animate("opacity": "1", 1000);
$("#player").delay(1500).css('background-image': 'url("PLAYERS/ouro1.png")'); //linha com problema
);.image .player
height: 600px;
width: 380px;
background-image: url("PACKS/P4.jpg");
display: flex;
justify-content: center;
align-items: center;
opacity: 1;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image">
<div class="player" id="player">
</div>
</div>jquery
jquery
editada 59 mins atrás
Sam
53,8mil113771
perguntada 1 hora atrás
Luan PeilLuan Peil
307
editada 59 mins atrás
Sam
53,8mil113771
perguntada 1 hora atrás
Luan PeilLuan Peil
307
editada 59 mins atrás
Sam
53,8mil113771
editada 59 mins atrás
Sam
53,8mil113771
editada 59 mins atrás
Sam
53,8mil113771
53,8mil113771
perguntada 1 hora atrás
Luan PeilLuan Peil
307
perguntada 1 hora atrás
Luan PeilLuan Peil
307
perguntada 1 hora atrás
Luan PeilLuan Peil
307
307
comentar |
comentar |
1 Resposta
1
ativas
mais antigas
votos
Usar animate do jQuery tem que ter cuidado porque se iniciar uma antes da outra terminar, resulta em comportamento inesperado.
Neste caso, seria melhor usar o callback no primeiro animate (iniciar a outra animação apenas quando uma terminar), e trocar a imagem antes da segunda animação:
$(document).ready(function()
$("#player")
.delay(500)
.animate("opacity": "0", 1000, function()
$(this)
.css('background-image', 'url(https://tinyjpg.com/images/social/website.jpg)')
.delay(1000)
.animate("opacity": "1", 1000);
);
);.image .player
height: 600px;
width: 380px;
background-image: url("https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg");
display: flex;
justify-content: center;
align-items: center;
opacity: 1;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image">
<div class="player" id="player">
</div>
</div>respondida 1 hora atrás
SamSam
53,8mil113771
comentar |
Sua resposta
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "526"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Desenvolvido por u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Registre-se ou faça log-in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Registre-se usando o Google
Registre-se usando o Facebook
Registre-se usando Email e Senha
Publicar como convidado
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fpt.stackoverflow.com%2fquestions%2f367278%2ftrocar-background-image-com-delay-via-jquery%23new-answer', 'question_page');
);
Publicar como convidado
Required, but never shown
1 Resposta
1
ativas
mais antigas
votos
1 Resposta
1
ativas
mais antigas
votos
ativas
mais antigas
votos
ativas
mais antigas
votos
Usar animate do jQuery tem que ter cuidado porque se iniciar uma antes da outra terminar, resulta em comportamento inesperado.
Neste caso, seria melhor usar o callback no primeiro animate (iniciar a outra animação apenas quando uma terminar), e trocar a imagem antes da segunda animação:
$(document).ready(function()
$("#player")
.delay(500)
.animate("opacity": "0", 1000, function()
$(this)
.css('background-image', 'url(https://tinyjpg.com/images/social/website.jpg)')
.delay(1000)
.animate("opacity": "1", 1000);
);
);.image .player
height: 600px;
width: 380px;
background-image: url("https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg");
display: flex;
justify-content: center;
align-items: center;
opacity: 1;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image">
<div class="player" id="player">
</div>
</div>respondida 1 hora atrás
SamSam
53,8mil113771
comentar |
Usar animate do jQuery tem que ter cuidado porque se iniciar uma antes da outra terminar, resulta em comportamento inesperado.
Neste caso, seria melhor usar o callback no primeiro animate (iniciar a outra animação apenas quando uma terminar), e trocar a imagem antes da segunda animação:
$(document).ready(function()
$("#player")
.delay(500)
.animate("opacity": "0", 1000, function()
$(this)
.css('background-image', 'url(https://tinyjpg.com/images/social/website.jpg)')
.delay(1000)
.animate("opacity": "1", 1000);
);
);.image .player
height: 600px;
width: 380px;
background-image: url("https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg");
display: flex;
justify-content: center;
align-items: center;
opacity: 1;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image">
<div class="player" id="player">
</div>
</div>respondida 1 hora atrás
SamSam
53,8mil113771
comentar |
Usar animate do jQuery tem que ter cuidado porque se iniciar uma antes da outra terminar, resulta em comportamento inesperado.
Neste caso, seria melhor usar o callback no primeiro animate (iniciar a outra animação apenas quando uma terminar), e trocar a imagem antes da segunda animação:
$(document).ready(function()
$("#player")
.delay(500)
.animate("opacity": "0", 1000, function()
$(this)
.css('background-image', 'url(https://tinyjpg.com/images/social/website.jpg)')
.delay(1000)
.animate("opacity": "1", 1000);
);
);.image .player
height: 600px;
width: 380px;
background-image: url("https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg");
display: flex;
justify-content: center;
align-items: center;
opacity: 1;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image">
<div class="player" id="player">
</div>
</div>respondida 1 hora atrás
SamSam
53,8mil113771
Usar animate do jQuery tem que ter cuidado porque se iniciar uma antes da outra terminar, resulta em comportamento inesperado.
Neste caso, seria melhor usar o callback no primeiro animate (iniciar a outra animação apenas quando uma terminar), e trocar a imagem antes da segunda animação:
$(document).ready(function()
$("#player")
.delay(500)
.animate("opacity": "0", 1000, function()
$(this)
.css('background-image', 'url(https://tinyjpg.com/images/social/website.jpg)')
.delay(1000)
.animate("opacity": "1", 1000);
);
);.image .player
height: 600px;
width: 380px;
background-image: url("https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg");
display: flex;
justify-content: center;
align-items: center;
opacity: 1;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image">
<div class="player" id="player">
</div>
</div>$(document).ready(function()
$("#player")
.delay(500)
.animate("opacity": "0", 1000, function()
$(this)
.css('background-image', 'url(https://tinyjpg.com/images/social/website.jpg)')
.delay(1000)
.animate("opacity": "1", 1000);
);
);.image .player
height: 600px;
width: 380px;
background-image: url("https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg");
display: flex;
justify-content: center;
align-items: center;
opacity: 1;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image">
<div class="player" id="player">
</div>
</div>$(document).ready(function()
$("#player")
.delay(500)
.animate("opacity": "0", 1000, function()
$(this)
.css('background-image', 'url(https://tinyjpg.com/images/social/website.jpg)')
.delay(1000)
.animate("opacity": "1", 1000);
);
);.image .player
height: 600px;
width: 380px;
background-image: url("https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg");
display: flex;
justify-content: center;
align-items: center;
opacity: 1;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image">
<div class="player" id="player">
</div>
</div>respondida 1 hora atrás
SamSam
53,8mil113771
editada 1 hora atrás
respondida 1 hora atrás
SamSam
53,8mil113771
respondida 1 hora atrás
SamSam
53,8mil113771
respondida 1 hora atrás
SamSam
53,8mil113771
53,8mil113771
comentar |
comentar |
Obrigado por contribuir com o Stack Overflow em Português!
- Certifique-se de responder à pergunta. Entre em detalhes sobre a sua solução e compartilhe o que você descobriu.
Mas evite …
- Pedir esclarecimentos ou detalhes sobre outras respostas.
- Fazer afirmações baseadas apenas na sua opinião; aponte referências ou experiências anteriores.
Para aprender mais, veja nossas dicas sobre como escrever boas respostas.
Registre-se ou faça log-in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Registre-se usando o Google
Registre-se usando o Facebook
Registre-se usando Email e Senha
Publicar como convidado
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fpt.stackoverflow.com%2fquestions%2f367278%2ftrocar-background-image-com-delay-via-jquery%23new-answer', 'question_page');
);
Publicar como convidado
Required, but never shown
Registre-se ou faça log-in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Registre-se usando o Google
Registre-se usando o Facebook
Registre-se usando Email e Senha
Publicar como convidado
Required, but never shown
Registre-se ou faça log-in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Registre-se usando o Google
Registre-se usando o Facebook
Registre-se usando Email e Senha
Publicar como convidado
Required, but never shown
Registre-se ou faça log-in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Registre-se usando o Google
Registre-se usando o Facebook
Registre-se usando Email e Senha
Registre-se usando o Google
Registre-se usando o Facebook
Registre-se usando Email e Senha
Publicar como convidado
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
