Trocar background-image com delay via 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.

editada 6 horas atrás

Sam

53,8mil113771

perguntada 6 horas atrás

Luan Peil

407

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.

editada 6 horas atrás

Sam

53,8mil113771

perguntada 6 horas atrás

Luan Peil

407

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.

editada 6 horas atrás

Sam

53,8mil113771

perguntada 6 horas atrás

Luan Peil

407

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

editada 6 horas atrás

Sam

53,8mil113771

perguntada 6 horas atrás

Luan Peil

407

editada 6 horas atrás

Sam

53,8mil113771

perguntada 6 horas atrás

Luan Peil

407

editada 6 horas atrás

Sam

53,8mil113771

editada 6 horas atrás

Sam

53,8mil113771

editada 6 horas atrás

Sam

53,8mil113771

perguntada 6 horas atrás

Luan Peil

407

perguntada 6 horas atrás

Luan Peil

407

perguntada 6 horas atrás

Luan Peil

407

comentar |

1 Resposta
1

ativas

mais antigas

votos

Usar animate do jQuery tem que ter cuidado porque se iniciar uma no mesmo elemento 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>

editada 4 horas atrás

respondida 6 horas atrás

Sam

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
});

}
});

rascunho salvo

rascunho descartado

Registre-se ou faça log-in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Publicar como convidado

Nome

E-mail

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

Nome

E-mail

Required, but never shown

1 Resposta
1

ativas

mais antigas

votos

1 Resposta
1

ativas

mais antigas

votos

Usar animate do jQuery tem que ter cuidado porque se iniciar uma no mesmo elemento 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>

editada 4 horas atrás

respondida 6 horas atrás

Sam

53,8mil113771

comentar |

Usar animate do jQuery tem que ter cuidado porque se iniciar uma no mesmo elemento 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>

editada 4 horas atrás

respondida 6 horas atrás

Sam

53,8mil113771

comentar |

Usar animate do jQuery tem que ter cuidado porque se iniciar uma no mesmo elemento 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>

editada 4 horas atrás

respondida 6 horas atrás

Sam

53,8mil113771

Usar animate do jQuery tem que ter cuidado porque se iniciar uma no mesmo elemento 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>

editada 4 horas atrás

respondida 6 horas atrás

Sam

53,8mil113771

editada 4 horas atrás

respondida 6 horas atrás

Sam

53,8mil113771

respondida 6 horas atrás

Sam

53,8mil113771

respondida 6 horas atrás

Sam

53,8mil113771

comentar |

rascunho salvo

rascunho descartado

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.

rascunho salvo

rascunho descartado

Registre-se ou faça log-in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Publicar como convidado

Nome

E-mail

Required, but never shown

Publicar como convidado

Nome

E-mail

Required, but never shown

Registre-se ou faça log-in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Publicar como convidado

Nome

E-mail

Required, but never shown

Registre-se ou faça log-in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Publicar como convidado

Nome

E-mail

Required, but never shown

Registre-se ou faça log-in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Publicar como convidado

Nome

E-mail

Required, but never shown

Nome

E-mail

Required, but never shown

E-mail

Required, but never shown

E-mail

Required, but never shown

E-mail

Required, but never shown

Nome

E-mail

Required, but never shown

E-mail

Required, but never shown

E-mail

Required, but never shown

E-mail

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Yrurtj