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













1















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.










compartilhar|melhorar esta pergunta




























    1















    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.










    compartilhar|melhorar esta pergunta


























      1












      1








      1








      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.










      compartilhar|melhorar esta pergunta
















      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






      compartilhar|melhorar esta pergunta















      compartilhar|melhorar esta pergunta













      compartilhar|melhorar esta pergunta




      compartilhar|melhorar esta pergunta








      editada 1 hora atrás









      Sam

      53,8mil113771




      53,8mil113771










      perguntada 1 hora atrás









      Luan PeilLuan Peil

      307




      307




















          1 Resposta
          1






          ativas

          mais antigas

          votos


















          2














          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>








          compartilhar|melhorar esta resposta
























            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


















            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









            2














            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>








            compartilhar|melhorar esta resposta





























              2














              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>








              compartilhar|melhorar esta resposta



























                2












                2








                2







                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>








                compartilhar|melhorar esta resposta















                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>






                compartilhar|melhorar esta resposta














                compartilhar|melhorar esta resposta



                compartilhar|melhorar esta resposta








                editada 1 hora atrás

























                respondida 1 hora atrás









                SamSam

                53,8mil113771




                53,8mil113771



























                    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














                    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





















































                    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







                    Popular posts from this blog

                    Do these spellcasting foci from Xanathar's Guide to Everything have to be held in a hand?How do foci and somatic+material components interact when it comes to occupying a hand?Can you cast spells with a Somatic component if you're holding a two-handed weapon?Crafting an Improvised Spellcasting Focus?Can a multiclass Cleric/Warlock hold a Holy Shield and an Arcane Staff and still cast spells?Where should I report printing errors in Xanathar's Guide to Everything?Where can I purchase a legal Xanathar's Guide to Everything PDF?Can I use a hand holding a focus from one class to cover somatic components for a spell from another class?Do you need a “gameplay-wise” free hand to handle material components?Portent, as it relates to the Gambling downtime rules from Xanathar's Guide to EverythingWhat is the correct interpretation of the Gambling Results table in Xanathar's Guide to Everything?

                    Can I stretch or expand an entire standalone document to fit the page? The Next CEO of Stack Overflow

                    Why do some congregations only make noise at certain occasions of Haman?Purim and Shushan PurimParashat TzavSource to make noise when Haman's name is mentioned?Does anyone say not to make noise for Haman?Why is Megillat Esther the only one to receive a bracha after reading it?Why did Haman change his mind and decide to immediately hang Mordechai?Chazal empty barrels make the most noiseWhy is Megillat Esther the only Megillah that is still read from parchment?Why is v'acharei added in some siddurim?is there some significance in their relationship between Haman and Daniel?Why is only Purim to be celebrated “forever”?Why didn't Haman just kill Mordechai?