Question 35819 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to make a dinamic div dissapear after few seconds – Jquery

I want to make the FIRST door dissapear after 5 seconds when I click on the first button.
Then the second door, the third.. one after another.
So I should add the code in the function toogleDoor.

I tried with JQuery but I failed.

Do you have any suggestions?

`

<div class="backDoor">
    <div class="door5" id="door5">
        <div class="door4" id="door4">
            <div class="door3" id="door3">
                <div class="door2" id="door2">
                    <div class="door1" id="door1">
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
  <div>
    <input type="text" id="parola"></input>
  
    <button id="button1" onclick="toggleDoor(1)">
        Apri prima porta
    </button>
    <button id="button2" onclick="toggleDoor(2)">
        Apri seconda porta
    </button>
    <button id="button3" onclick="toggleDoor(3)">
        Apri terza porta
    </button>
    <button id="button4" onclick="toggleDoor(4)">
        Apri quarta porta
    </button>
    <button id="button5" onclick="toggleDoor(5)">
        Apri quinta porta
    </button>
    <script>
        
      function toggleDoor(door) {
    // Find the proper door
    element = document.querySelector('.door' + door); // With constructed reference

    
    if (element) { // does the door exist?
        if (checkParola(door)) { // proper password?
            element.classList.toggle("openDoor");
            // Here I want to make the selected door to dissapear after 5 seconds
    };
};
      };

`

Tags:

3

Answers


  1. 0

    You could use setTimeout() to make the door dissapear. Just use an arrow function inside that toggles the class.

    setTimeout(()=>{
  element.classList.toggle("openDoor")
}, 5000)

    This will prompt a class change after 5000 milliseconds (5 seconds). Inside of the openDoor class in your CSS, you must use display:none; or visibility: hidden; to make the above code work.

    Login or Signup to reply.
  2. 0

    You can try using the setTimeout function.

    <div class="backDoor">
    <div class="door5" id="door5">
        <div class="door4" id="door4">
            <div class="door3" id="door3">
                <div class="door2" id="door2">
                    <div class="door1" id="door1">
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
  <div>
    <input type="text" id="parola"></input>
<button id="button1" onclick="toggleDoor(1)">
    Apri prima porta
</button>
<button id="button2" onclick="toggleDoor(2)">
    Apri seconda porta
</button>
<button id="button3" onclick="toggleDoor(3)">
    Apri terza porta
</button>
<button id="button4" onclick="toggleDoor(4)">
    Apri quarta porta
</button>
<button id="button5" onclick="toggleDoor(5)">
    Apri quinta porta
</button>
<script>
    
  function toggleDoor(door) {
// Find the proper door
element = document.querySelector('.door' + door); // With constructed reference


if (element) { // does the door exist?
    if (checkParola(door)) { // proper password?
        element.classList.toggle("openDoor");
        // Here I want to make the selected door to dissapear after 5 seconds
        setTimeout(function(){
            element.style.display = "none";
        }, 5000);
    }
}
    };
};
    Login or Signup to reply.
  3. 0

    The idea is not clear enough, I didn’t understand what you exactly want to do,
    And if every door has it’s own button and functionality, why you nested the divs inside each others.

    But…

    If you want to apply any function after a period of time, you can use the setTimeout() method, which takes two parameters, the first is the function and the second is the time in milliseconds:

    setTimeout(dothing, 100)  // will apply "dothing" after 100 milliseconds

function dothing() {
    // your code here
}

    And if you want to pass arguments to your function, so you can do that:

    setTimeout( function() { dothing( params ) }, 100 )

    If it understood your question wrongly, please explain it more to be able to help.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search