Categories
JQuery Web development

jQuery setTimeOut method / Coffee, coffee more coffee…

The setTimeout() method is JavaScript function however, this function can be also used with a library such as jQuery.

Iced Coffee - Vector Image
Do you like this image? Check more images in the store.

The setTimeout() method calls a function or evaluates an expression after a specified number of milliseconds. The function is only executed once.

Note: 1000 ms = 1 second

Syntax:

setTimeout(function() {
      // Do something after 1 second
      // the function takes time in a millisecond – and hence we have specified ‘1000’ as the timeout value
     }, 1000);

To create the animation below I used setTimeOut method:

*animation opened in the Safari browser.
To see the live output of the animation click here.

What do you need to do?

  1. Add HTML
  2. Add CSS
  3. Add jQuery

Step1.

Add HTML

Create the circle, and add the content (mug, coffee, drip and the fill).

<div id="circle">
   <div id="content">
     <div class="mug">
       <div class="handle"></div>
       <div class="inside">
         <div class="coffee"></div>
       </div>
       <div class="drink"></div>
       <div class="drip"></div>
        <div class="drip1"></div>
        <div class="drip2"></div>
     </div>
     <div class="fill"></div>
  </div>
</div>

Step2.

Add CSS

Set the colour and position of the background, circle and the content:

body{
   background-color: #e26d5c;
   background-size: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
}
#circle {
   background-color: #A1C181;
   width:450px;
   height:450px;
   top:30px;
   border-radius: 50%;
   position: relative;
   z-index: 1;
   overflow:hidden;
}
#content{
   background-color:transparent;
   width:450px;
   height:450px;
   border-radius:50%;
   position:relative;
   box-shadow:inset 5px -5px 0 rgba(0,0,0,0.07);
}

Style the mug:

.mug {
  position: absolute;
  width: 170px;
  height: 180px;
  background-color: #FCCA46;
  top: 135px;
  left:140px;  
}

.mug:after {
  position: absolute;
  content:"";
  width: 170px;
  height: 40px;
  border-radius:50%;
  background-color: #FCCA46;
  top:-18px;
}

.mug:before {
  position: absolute;
  content:"";
  width: 170px;
  height: 40px;
  border-radius:50%;
  background-color: #FCCA46;
  top:158px;
  box-shadow: 1px 25px 3px rgba(0,0,0,0.09);
}
.handle {
  position: absolute;
  border: 17px solid #FCCA46;
  border-radius:50%;
  width: 100px;
  height: 100px;
  left: 100px;
  top: 25px;  
}

.inside {
  position: absolute;
  content:"";
  width: 155px;
  height: 40px;
  border-radius:50%;
  background-color: #ffe066;
  top:-13px;
  left: 7px;
  z-index:1;
  overflow: hidden; 
}
Coffee jQuery

Add Coffee and drip:

.coffee {
  position: absolute;
  width: 200px;
  left:-20px;
  height: 40px;
  border-radius:50%;
  background-color: #432818;
  top:30px;
  opacity:1;
  
}

.drip {
  position: absolute; 
  width: 5px;
  height: 5px;
  background-color: #432818;
  z-index:2;
  left:60px;
  top:20px;
  opacity:1;
  
}

.drip1 {
  position: absolute; 
  width: 8px;
  height: 2px;
  left:35px;
  top:20px;
  background-color: #432818;
}

.drip2 {
  position: absolute; 
  width: 8px;
  height: 2px;
  left:130px;
  top:20px;
  background-color: #432818;
}

.fill {
  position: absolute;
  width: 500px;
  height: 500px;
  top:450px;
  background-color: #432818;
  z-index:3;
}

.drink {
  position: absolute;
  width: 20px;
  height: 2px;
  background-color: #432818;
  top:-150px;
  left: 75px;
  z-index:2;
}

Step3.

Add jQuery

setTimeout(function(){
    $(".drink").animate({
        "height": "+=275",
        top: "-=100"
    })
}, 2500, "ease")


setTimeout(function(){
    $(".coffee").animate({
        "height": "+=300",
        top: "-=100"
    })
}, 3000, "ease")

setTimeout(function(){
    $(".drip").animate({
        "height": "+=300",
        bottom: "-=100"
    })
}, 4500, "ease")

setTimeout(function(){
    $(".drip1").animate({
        "height": "+=300",
        bottom: "-=100"
    })
}, 5500, "ease")

setTimeout(function(){
    $(".drip2").animate({
        "height": "+=300",
        bottom: "-=100"
    })
}, 6500, "ease")

setTimeout(function(){
    $(".fill").animate({
        "height": "+=500",
        top: "-=500"
    }, 5000)
}, 5500, "ease")

To see the live output of the animation go to lenastanley.com.

Enjoy coding!

Leave a Reply