CODEWITHSUNDEEP
phpjqueryimageweb
Aditya Singh Parmar
Aditya Singh Parmar

Reputation: 310

How to display an image or text in specified time after refreshing the website?

I'm actually making a simple website. What I want is that , a certain image be displayed after,(say), 5sec of entering/refreshing that webpage. I tried looking and bumped into the oneTime() function of jQuery. Is there any other way ? Please tell a method using PHP as language base. Thank you ....

Upvotes: 0

Views: 142

Answers (2)

Nick Bartlett
Nick Bartlett

Reputation: 4975

This can (and perhaps should) be done with CSS animation, depending on your browser requirements.

@-webkit-keyframes fadeIn { 
    from { opacity: 0; } 
    to { opacity: 1; } 
}
@keyframes fadeIn { 
    from { opacity:0; } 
    to { opacity:1; } 
}

.fade-in {
    opacity:0;
    height: 200px;
    width: 200px; 

    -webkit-animation: fadeIn ease-in 1; 
    animation:fadeIn ease-in 1;

    -webkit-animation-fill-mode:forwards;  
    animation-fill-mode:forwards;

    -webkit-animation-duration:1s;
    animation-duration:1s; 
 
    -webkit-animation-delay: 2s; /* Chrome, Safari, Opera */
    animation-delay: 2s;
}
<img src="http://www.helpinghomelesscats.com/images/cat1.jpg" class="fade-in">

Codepen

Upvotes: 0

renakre
renakre

Reputation: 8291

$('#myimgId').hide().delay(500).show();

With this code, first, assuming that your image is not hidden using css, I make it invisible using .hide method of jquery. Then, we before I call .show() method to make it visible back, I add a 500ms delay by using .delay()

Upvotes: 1

Related Questions