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 1 hora atrás

Sam

53,8mil113771

perguntada 1 hora atrás

Luan 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.

editada 1 hora atrás

Sam

53,8mil113771

perguntada 1 hora atrás

Luan 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.

editada 1 hora atrás

Sam

53,8mil113771

perguntada 1 hora atrás

Luan 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

editada 1 hora atrás

Sam

53,8mil113771

perguntada 1 hora atrás

Luan Peil

307

editada 1 hora atrás

Sam

53,8mil113771

perguntada 1 hora atrás

Luan Peil

307

editada 1 hora atrás

Sam

53,8mil113771

editada 1 hora atrás

Sam

53,8mil113771

editada 1 hora atrás

Sam

53,8mil113771

perguntada 1 hora atrás

Luan Peil

307

perguntada 1 hora atrás

Luan Peil

307

perguntada 1 hora atrás

Luan Peil

307

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>

editada 1 hora atrás

respondida 1 hora 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 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 1 hora atrás

respondida 1 hora atrás

Sam

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>

editada 1 hora atrás

respondida 1 hora atrás

Sam

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>

editada 1 hora atrás

respondida 1 hora atrás

Sam

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>

editada 1 hora atrás

respondida 1 hora atrás

Sam

53,8mil113771

editada 1 hora atrás

respondida 1 hora atrás

Sam

53,8mil113771

respondida 1 hora atrás

Sam

53,8mil113771

respondida 1 hora 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

搜尋此網誌

Bxdty