Animating Progress Element value

Animating Progress Element value - javascript

I have a progress element. That element looks like the following:
<div class="container">
<div id="progress-bar">
<progress id="myProgressBar" class="progress" style="background-color:orange;" value="0" max="100"></progress>
</div>
<br>
<button id="animateButton" class="btn btn-secondary">Animate</button>
</div>
When a user clicks the "animate" button, I want to fill the progress bar with an orange bar to 75%. The animation should take .5 seconds (half a second).
As shown in this Bootply, I'm stuck getting the animation to work. I tried using setInterval, however, the animation was really jerky. Plus, I couldn't get the bar to be orange. It was always green.
Is there a way to animate the value of a progress element for a smooth animation?

In webkit browsers you can use a pseudo class to add a transition and color:
$('#animateButton').on('click', function() {
$('#myProgressBar').val(75);
});
progress[value]::-webkit-progress-value {
transition: width 0.5s;
background: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="progress-bar">
<progress id="myProgressBar" class="progress" style="background-color:orange;" value="0" max="100"></progress>
</div>
<br>
<button id="animateButton" class="btn btn-secondary">Animate</button>
</div>
If you need wider browser support, you can iterate the value 'till you get to the target value to animate the bar. However, you can't change the color.
function animateProgress($progressBar, val, currentVal) {
currentVal = currentVal || 0;
var step = val * 16 / 500;
function animate(currentVal) {
currentVal += step;
$progressBar.val(currentVal);
currentVal < val && requestAnimationFrame(function() {
animate(currentVal);
});
}
animate(currentVal);
}
$('#animateButton').on('click', function() {
animateProgress($('#myProgressBar'), 75);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="progress-bar">
<progress id="myProgressBar" class="progress" style="background-color:orange;" value="0" max="100"></progress>
</div>
<br>
<button id="animateButton" class="btn btn-secondary">Animate</button>
</div>

Here's how it can be done using smooth CSS3 animation : no need for jQuery or even JS animation at all.
var progressBar = document.getElementById("progress-bar")
document.getElementById("animateButton").onclick= function(){
progressBar.style.width = "75%"
progressBar.style["background-color"] = "orange"
}
.container {
height: 30px;
}
.container #progress-bar {
background-color: #008000;
height: 100%;
width: 10%;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
<div class="container">
<div id="progress-bar"></div>
</div>
<br>
<button id="animateButton" class="btn btn-secondary">Animate</button>

Here's an example
document.getElementById("animateButton").onclick= function(){
document.getElementById("progress-bar").style.backgroundColor = "orange";
document.getElementById("progress-bar").style.width = "75%";
}
#progressHolder{
background:grey;
height:20px;
width:300px;
}
#progress-bar{
background:grey;
height:20px;
width:0px;
transition:background-color 0.5s, width 0.5s;
}
<div class="container">
<div id="progressHolder">
<div id="progress-bar">
</div>
</div>
<br>
<button id="animateButton" class="btn btn-secondary">Animate</button>
</div>

You can use JQuery animation and set the time interval as "slow", "fast", or in milliseconds.
$("#progress-bar").click(function(){
$("#myProgressBar").animate({width: "100px"},slow);
});

Related

Javascript transition on click after display block

im trying to make a simple transition from right to left when i click on a button.
I've done this to illustrate what i mean : https://jsfiddle.net/Waarx/9kjhnwLp/22/
var button1 = document.querySelector('#div1');
button1.addEventListener('click', function(event) {
document.querySelector('#display2').style.display = "none";
document.querySelector('#display1').style.display = "block";
});
var button2 = document.querySelector('#div2');
button2.addEventListener('click', function(event) {
document.querySelector('#display2').style.display = "block";
document.querySelector('#display1').style.display = "none";
});
.parent {
width: 800px;
}
.col {
float: left;
width: 20%;
}
.col2 {
width: 70%;
}
.none {
display: none
}
<div class="parent">
<div class="col">
Div1
Div2
</div>
<div class="col2">
<div class="none" id="display1">
display 1
</div>
<div class="none" id="display2">
display 2
</div>
</div>
</div>
I hope that you could help me.

First off you can do the same thing with jQuery like this with less code:
$('#div1').click(function(event) {
$('#display2').hide();
$('#display1').show();
});
$('#div2').click(function(event) {
$('#display2').show();
$('#display1').hide();
});
Secondly: To animate an html element you have to set its opacity. display: none; will not animate at all. Also using only classes makes you lose less time on your CSS. So,
Test it here:
$( document ).ready(function() {
$('.div1').click(function(event) {
$('.display2').addClass('none');
$('.display1').removeClass('none');
});
$('.div2').click(function(event) {
$('.display2').removeClass('none');
$('.display1').addClass('none');
});
});
.display1, .display2 {
transform: translateX(0);
transition: all 1s ease-in-out;
}
.none {
transform: translateX(100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="parent">
<div class="col">
Div1
Div2
</div>
<div class="col2">
<div class="display1 none">
display 1
</div>
<div class="display2 none">
display 2
</div>
</div>
</div>

How to rotate images when you navigate to a particular section?

I have a bootstrap based website which is divided into different sections. In a section called features I have three images which I want to rotate when a user navigates to it or scroll downs to that section and also when the user hover overs it. I know how to rotate the images on hover but unable to think of a way to do it when a user scrolls down to that section.
The html section code:-
<section id="features">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading dark">Features</h2>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-4 text-center">
<div class="feature-box">
<img src="bg1.png" class="feature-size">
</div>
</div>
<div class="col-lg-4 text-center">
<div class="feature-box">
<img src="bg2.png" class="feature-size">
</div>
</div>
<div class="col-lg-4 text-center">
<div class="feature-box">
<img src="bg3.png" class="feature-size">
</div>
</div>
</div>
</div>
</section>
The css for rotating images on hover:-
<style type="text/css">
img {
transition: all 0.5s ease-in-out 0s;
}
img:hover {
cursor: default;
transform: rotate(360deg);
transition: all 0.5s ease-in-out 0s;
}
</style>
Whenever a user goes to that section the images will rotate once and also on hovering over the image. Please provide a way to do it with css or plain javascript. I don't want to use any javascript plugins like jquery. Any help is highly appreciated.

You can use Waypoint js : http://imakewebthings.com/waypoints/
var waypoint = new Waypoint({
element: document.getElementById('waypoint'),
handler: function(direction) {
console.log('Scrolled to waypoint!')
}
})
Add a class on reaching the point during the scroll.

Using JQuery plugin Appear can make this a lot easier.
function toggleHover() {
$(".feature-size").each(function() {
$(this).toggleClass("hovered")
});
}
$('#features').appear(function() {
setTimeout(function() {
toggleHover();
setTimeout(toggleHover, 1000); //to revert the animation
}, 1500);
});
and add this css rule.
img.hovered {
cursor: default;
transform: rotate(360deg);
transition: all 0.5s ease-in-out 0s;
}
Feel free to change the timeout seconds, as i cannot predict the timings you may want without hands on

Here is the one with JavaScript, but you need to make some tweaks according to the requirements.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{height: 100vh;}
</style>
</head>
<body>
<div>
<script>
</script>
</div>
<div>
<script>
</script>
</div>
<div id="foo" style="background-color:red;">
<script>
</script>
</div>
<script>
function getPosition(el) {
var xPos = 0;
var yPos = 0;
while (el) {
if (el.tagName == "BODY") {
// deal with browser quirks with body/window/document and page scroll
var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
var yScroll = el.scrollTop || document.documentElement.scrollTop;
xPos += (el.offsetLeft - xScroll + el.clientLeft);
yPos += (el.offsetTop - yScroll + el.clientTop);
} else {
// for all other non-BODY elements
xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
yPos += (el.offsetTop - el.scrollTop + el.clientTop);
}
el = el.offsetParent;
}
return {
x: xPos,
y: yPos
};
}
// deal with the page getting resized or scrolled
window.addEventListener("scroll", checkPosition, false);
window.addEventListener("resize", checkPosition, false);
function checkPosition() {
console.log(getPosition(myElement));
console.log(position);
if((getPosition(myElement)).y < 10 && (getPosition(myElement)).y > -10){
alert("Here");
}
}
var myElement = document.querySelector("#foo");
var position = getPosition(myElement);
</script>
</body>
</html>

You could do it with :target pseudo-class (MDN)
Something like this with your given code:
a {
display: block;
/* Just for demonstration */
height: 100vh;
}
img {
transition: all 0.5s ease-in-out 0s;
}
:target img {
cursor: pointer;
transform: rotate(360deg);
}
:target img:hover {
transform: rotate(720deg);
}
Link to section
<section id="features">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading dark">Features</h2>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-4 text-center">
<div class="feature-box">
<img src="http://fillmurray.com/300/300" class="feature-size">
</div>
</div>
<div class="col-lg-4 text-center">
<div class="feature-box">
<img src="http://fillmurray.com/300/300" class="feature-size">
</div>
</div>
<div class="col-lg-4 text-center">
<div class="feature-box">
<img src="http://fillmurray.com/300/300" class="feature-size">
</div>
</div>
</div>
</div>
</section>

Creating a star rating from an image based on a float number?

recently I have wanted to turn a number into a star rating and I stumbled upon this post here: https://stackoverflow.com/a/1987545/1871869 which is exactly what I wanted to do. I have followed this explanation but I can't seem to get it to work on my local environment, and I was wondering if someone could help me out. Here is my attempt:
$.fn.stars = function() {
return $(this).each(function() {
// Get the value
var val = parseFloat($(this).html());
// Make sure that the value is in 0 - 5 range, multiply to get width
var size = Math.max(0, (Math.min(5, val))) * 16;
// Create stars holder
var $span = $('<span />').width(size);
// Replace the numerical value with stars
$(this).html($span);
});
}
$(function() {
console.log("Calling stars()");
$('.results-contents span.stars').stars();
});
.results {
font-size: 0;
padding-bottom: 16px;
}
.results-content {
font-size: 13px;
display: inline-block;
margin-left: 20px;
vertical-align: top;
}
.results .results-content span.stars span.stars span {
background: url('/resources/graphics/stars-icons.png') 0 -36px repeat-x;
width: 175px;
height: 80px;
}
.results .results-content span.stars {
max-width: 80px;
background-position: 0 0;
}
<script type="text/template" id="results-template">
<div class="results">
<div class="results-content">
<span class="stars">4.0</span>
</div>
</div>
</script>
Image of stars:
What I wanted to do was to simply have the empty stars show, and then based on the rating, show the orange stars on top of the empty stars so that I can show full and half star ratings. However, all I get is a number to show up. My console.log above seems to be called but it seems like the actual rendering of the image and calculation of the star rating is not working. Any help would be appreciated. Thanks!

You had multiple issues from CSS styles being wrong to your selector being wrong. Below is not perfect, but it is rendering.
$.fn.stars = function() {
return this.each(function() {
// Get the value
var val = parseFloat($(this).html());
// Make sure that the value is in 0 - 5 range, multiply to get width
var size = Math.max(0, (Math.min(5, val))) * 36.5;
// Create stars holder
var $span = $('<span> </span>').width(size);
// Replace the numerical value with stars
$(this).empty().append($span);
});
}
$(function() {
console.log("Calling stars()");
$('.results-content span.stars').stars();
});
.results {
font-size: 0;
padding-bottom: 16px;
}
.results-content {
font-size: 13px;
display: inline-block;
margin-left: 20px;
vertical-align: top;
background: url('https://i.stack.imgur.com/rwkqF.png') 0 0 repeat-x;
width: 185px;
height: 35px;
}
.results .results-content span.stars span {
background: url('https://i.stack.imgur.com/rwkqF.png') 0 -36px repeat-x;
display: inline-block;
height: 35px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="results">
<div class="results-content">
<span class="stars">0.0</span>
</div>
</div>
<div class="results">
<div class="results-content">
<span class="stars">0.5</span>
</div>
</div>
<div class="results">
<div class="results-content">
<span class="stars">1.0</span>
</div>
</div>
<div class="results">
<div class="results-content">
<span class="stars">1.5</span>
</div>
</div>
<div class="results">
<div class="results-content">
<span class="stars">2.0</span>
</div>
</div>
<div class="results">
<div class="results-content">
<span class="stars">2.0</span>
</div>
</div>
<div class="results">
<div class="results-content">
<span class="stars">2.5</span>
</div>
</div>
<div class="results">
<div class="results-content">
<span class="stars">3.0</span>
</div>
</div>
<div class="results">
<div class="results-content">
<span class="stars">3.5</span>
</div>
</div>
<div class="results">
<div class="results-content">
<span class="stars">4.0</span>
</div>
</div>
<div class="results">
<div class="results-content">
<span class="stars">4.5</span>
</div>
</div>
<div class="results">
<div class="results-content">
<span class="stars">5.0</span>
</div>
</div>

JQuery Moving 30 boxes from left to right, then right to right

I'm learning Jquery right now and I'm stuck on how I move my boxes from left to right, then right to left. They have a delay meter that I can use as well to change the speed. I just don't know what I'm missing to make the boxes move in the two specified directions (Left To Right, Right To Left). I'm assuming it's something simple, that's usually the case. But, I'm not sure what to change. Any Help would be greatly appreciated.
Here is my code:
var easingsList = [
"swing",
"easeInQuad",
"easeOutQuad",
"easeInOutQuad",
"easeInCubic",
"easeOutCubic",
"easeInOutCubic",
"easeInQuart",
"easeOutQuart",
"easeInOutQuart",
"easeInQuint",
"easeOutQuint",
"easeInOutQuint",
"easeInSine",
"easeOutSine",
"easeInOutSine",
"easeInExpo",
"easeOutExpo",
"easeInOutExpo",
"easeInCirc",
"easeOutCirc",
"easeInOutCirc",
"easeInElastic",
"easeOutElastic",
"easeInOutElastic",
"easeInBack",
"easeOutBack",
"easeInOutBack",
"easeInBounce",
"easeOutBounce"
];
var moveRight = function(){
var n = 0;
var e = easingsList[n];
var d = parseInt($("#delay").val());
moveBoxRight(n, e, d);
var n = 1;
var e = easingsList[n];
var d = parseInt($("#delay").val());
moveBoxRight(n, e, d);
}
var moveLeft = function(){
var n = 0;
var e = easingsList[n];
var d = parseInt($)"#delay").val());
moveBoxLeft (n, e, d);
var n = 1;
var e = easingsList[n];
var d = parseInt($("#delay").val());
moveBoxLeft(n, e, d);
}
var moveBoxRight= function(n, easing, duration)
{
var id = "#button" + n.toString();
var pageWidth = $("body").width();
var boxWidth = 150;
$(id).animate({"margin-left":pageWidth-boxWidth + "px"}, duration, easing);
}
var moveBoxLeft= function(n, easing, duration)
{
var id = "#button" + n.toString();
var pageWidth = $("body").width();
var boxWidth = 150;
$(id).animate({"margin-left" : "0px"}, duration, easing);
}
*******and heres my HTML*********
<!doctype html>
<html>
<head>
<title> jQuery animate()</title>
<script src="jquery-1.11.3.js" type="text/javascript">
</script>
<script src="jquery.easing.1.3.js" type="text/javascript">
</script>
<script src="test.js" type="text/javascript">
</script>
<style>
body
{
margin: 0;
}
.button{
height:50px;
width:150px;
display: block;
border: solid 1px black;
text-align: center;
text-decoration: none;
margin-bottom: 10px;
line-height: 50px;
}
</style>
</head>
<body>
<h1> jQuery Animate Easing Examples </h1>
<input placeholder='delay; 100ms, 1s etc.' id='delay'>
<input placeholder='end color; rgb(0,0,0), #000000, rgba(0,0,0,1) etc.' id='endColor'>
<br>
<a href='javascript:moveLeft()' class='link' id='button1'> Move Left </a>
<a href='javascript:moveRight()' class='link' style='float:right' id='button1'> Move Right </a>
<div class='button' id='button0'> swing </div>
<div class='button' id='button1'>easeInQuad</div>
<div class='button' id='button2'>easOutQuad</div>
<div class='button' id='button3'>easeInOutQuad</div>
<div class='button' id='button4'>easeInCubic</div>
<div class='button' id='button5'>easeOutCubic</div>
<div class='button' id='button6'>easeInOutCubic</div>
<div class='button' id='button7'>easeInQuart</div>
<div class='button' id='button8'>easeOutQuart</div>
<div class='button' id='button9'>easeInOutQuart</div>
<div class='button' id='button10'>easInQuint</div>
<div class='button' id='button11'>easeOutQuint</div>
<div class='button' id='button12'>easeInOutQuint</div>
<div class='button' id='button13'>easeInSine</div>
<div class='button' id='button14'>easeOutSine</div>
<div class='button' id='button15'>easeInOutSine</div>
<div class='button' id='button16'>easeInExpo</div>
<div class='button' id='button17'>easeOutExpo</div>
<div class='button' id='button18'>easeInOutExpo</div>
<div class='button' id='button19'>easeInCirc</div>
<div class='button' id='button20'>easeOutCirc</div>
<div class='button' id='buton21'>easeInOutCirc</div>
<div class='button' id='button22'>easeInElasic</div>
<div class='button' id='button23'>easeOutElastic</div>
<div class='button' id='button24'>easeInOutElatic</div>
<div class='button' id='button25'>easeInBack</div>
<div class='button' id='button26'>easeOutBack</div>
<div class='button' id='button27'>easeInOutBack</div>
<div class='button' id='button28'>easeInBounce</div>
<div class='button' id='button29'>easeOutBounce</div>
</div>
</body>
</html>

In my opinion, your approach can be improved altogether
Firstly, animating the margin property of an element is not a good way to move it left and right. Making the element fixed and animating the left and right properties would work much better.
Secondly, you could greatly simplify the code by using an attribute on the button to determine direction instead of writing duplicated code with just a few words different for moving left vs right.
Also, your calling your variable delay but using that variable to set the animation's duration which is misleading. You should re-name that duration
Here's how I would do it:
var easingsList = [
"swing",
"easeInQuad",
"easeOutQuad",
"easeInOutQuad",
"easeInCubic",
"easeOutCubic",
"easeInOutCubic",
"easeInQuart",
"easeOutQuart",
"easeInOutQuart",
"easeInQuint",
"easeOutQuint",
"easeInOutQuint",
"easeInSine",
"easeOutSine",
"easeInOutSine",
"easeInExpo",
"easeOutExpo",
"easeInOutExpo",
"easeInCirc",
"easeOutCirc",
"easeInOutCirc",
"easeInElastic",
"easeOutElastic",
"easeInOutElastic",
"easeInBack",
"easeOutBack",
"easeInOutBack",
"easeInBounce",
"easeOutBounce"
];
$('.move').click(function(){
var $this=$(this);
var duration = parseInt($("#duration").val());
var direction = $(this).data('direction');
var n =0;
moveBox($('.box').eq(n), easingsList[n], duration, direction);
moveBox($('.box').eq(n+1), easingsList[n+1], duration, direction);
});
function moveBox($element, easing, duration, direction) {
var pageWidth = $("body").width();
var boxWidth = $element.width();
$element.css('right','auto').css('left','auto');
var options = {duration:duration,easing:easing};
var properties ={};
properties[direction]=pageWidth - boxWidth + "px";
$element.stop().animate(properties,options);
}
body {
margin: 0;
}
.box {
height: 50px;
width: 150px;
display: block;
border: solid 1px black;
text-align: center;
text-decoration: none;
margin-bottom: 10px;
line-height: 50px;
position:fixed;
}
.box-holder{
width: 100%;
position:relative;
height: 50px;
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<h1> jQuery Animate Easing Examples </h1>
<input placeholder='duration; 100ms, 1s etc.' id='duration' value="3000">
<input placeholder='end color; rgb(0,0,0), #000000, rgba(0,0,0,1) etc.' id='endColor'>
<br>
<a href='#' class='link move' data-direction="right" > Move Left </a>
<a href='#' class='link move' data-direction="left" style='float:right'> Move Right </a>
<div class="box-holder"><div class="box"> swing </div> </div>
<div class="box-holder"><div class="box">easeInQuad</div></div>
<div class="box-holder"><div class="box">easOutQuad</div></div>
<div class="box-holder"><div class="box">easeInOutQuad</div></div>
<div class="box-holder"><div class="box">easeInCubic</div></div>
<div class="box-holder"><div class="box">easeOutCubic</div></div>
<div class="box-holder"><div class="box">easeInOutCubic</div></div>
<div class="box-holder"><div class="box">easeInQuart</div></div>
<div class="box-holder"><div class="box">easeOutQuart</div></div>
<div class="box-holder"><div class="box">easeInOutQuart</div></div>
<div class="box-holder"><div class="box">easInQuint</div></div>
<div class="box-holder"><div class="box">easeOutQuint</div></div>
<div class="box-holder"><div class="box">easeInOutQuint</div></div>
<div class="box-holder"><div class="box">easeInSine</div></div>
<div class="box-holder"><div class="box">easeOutSine</div></div>
<div class="box-holder"><div class="box">easeInOutSine</div></div>
<div class="box-holder"><div class="box">easeInExpo</div></div>
<div class="box-holder"><div class="box">easeOutExpo</div></div>
<div class="box-holder"><div class="box">easeInOutExpo</div></div>
<div class="box-holder"><div class="box">easeInCirc</div></div>
<div class="box-holder"><div class="box">easeOutCirc</div></div>
<div class="box-holder"><div class="box">easeInOutCirc</div></div>
<div class="box-holder"><div class="box">easeInElasic</div></div>
<div class="box-holder"><div class="box">easeOutElastic</div></div>
<div class="box-holder"><div class="box">easeInOutElatic</div></div>
<div class="box-holder"><div class="box">easeInBack</div></div>
<div class="box-holder"><div class="box">easeOutBack</div></div>
<div class="box-holder"><div class="box">easeInOutBack</div></div>
<div class="box-holder"><div class="box">easeInBounce</div></div>
<div class="box-holder"><div class="box">easeOutBounce</div></div>

Page navigation using jQuery slideUp() animation

I'm trying to create a multi-page navigation using jQuery, where when we change page the current one would suffer a slideUp() and disappear.
Until now I have this JS:
$(document).ready(function() {
current = "#div1";
$("#btn1").click(function() {
if (current != "#div1") {
$(current).slideUp("slow");
current = "#div1";
}
});
$("#btn2").click(function() {
if (current != "#div2") {
$(current).slideUp("slow");
current = "#div2";
}
});
$("#btn3").click(function() {
if (current != "#div3") {
$(current).slideUp("slow");
current = "#div3";
}
});
});
Running on this: http://jsfiddle.net/93gk3oyg/
I just can't seem to correctly navigate from page 1 to 3, 3 to 2, and so on...
Any help would be appreciated :)

I have refactored your code somewhat. I actually do not make any use of the slide-up functionality, everything is handled using CSS animations, which means you will be able to alter those to something else later. Also notice, that this means you don't really need to mess about with z-index.
HTML:
<div id="menu">
<button class="btn" id="btn1" data-rel-page="div1">Pag1</button>
<button class="btn" id="btn2" data-rel-page="div2">Pag2</button>
<button class="btn" id="btn3" data-rel-page="div3">Pag3</button>
<button class="btn" id="btn4" data-rel-page="div4">Pag4</button>
</div>
<div id="div1" class="fullscreen active">
<center>HOME</center>
</div>
<div id="div2" class="fullscreen">
<center>PAGE2</center>
</div>
<div id="div3" class="fullscreen">
<center>PAGE3</center>
</div>
<div id="div4" class="fullscreen">
<center>PAGE4</center>
</div>
JS:
$(document).ready(function () {
var current = "div1";
$("[data-rel-page]").bind('click', function (evt) {
var el = $(evt.currentTarget).attr('data-rel-page');
if (el === current) return;
var $el = $("#" + el);
var $cur = $("#" + current);
current = el;
$cur.removeClass('active');
$el.addClass('active');
})
});
CSS:
.fullscreen {
transition: all 0.4s linear;
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
height: 0%;
overflow: hidden;
}
.fullscreen.active {
display: block;
height: 100%;
}
Here is the fiddle: http://jsfiddle.net/93gk3oyg/9/

Develop Reference

JavaScript is the programming language of the Web.

Animating Progress Element value - javascript

You can use JQuery animation and set the time interval as "slow", "fast", or in milliseconds. $("#progress-bar").click(function(){ $("#myProgressBar").animate({width: "100px"},slow); });

Related

Javascript transition on click after display block

How to rotate images when you navigate to a particular section?

Creating a star rating from an image based on a float number?

JQuery Moving 30 boxes from left to right, then right to right

Page navigation using jQuery slideUp() animation

Categories

Resources