Why is it that if I give a variable a "0", then in the html the number is "10"? I'm using jQuery and JavaScript both, but as you can see the number in the middle is "10" after I reload the page. It's always "10" and not changing.
I'm trying so that that purple square goes in circles 10 times and I want the middle number to change every round up by one. How can I achieve that?
let calc = 0;
for (let i = 0; i < 11; i++) {
$('#animate').click(function() {
$(this).animate({
top: '350px'
});
$(this).animate({
left: '350px'
});
$(this).animate({
top: '0px'
});
$(this).animate({
left: '0px'
});
});
document.getElementById("szam").innerHTML = calc;
calc++;
}
#container {
height: 400px;
width: 400px;
background-color: yellow;
}
#animate {
height: 50px;
width: 50px;
position: absolute;
background-color: rebeccapurple;
}
body {
margin: 0px;
padding: 0px;
}
#szam {
position: absolute;
top: 100px;
left: 170px;
font-size: 72px;
}
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-
2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous">
</script>
<div id="container">
<div id="animate">
<p>Hello</p>
</div>
<h1 id="szam">0</h1>
</div>
Here's a screenshot:
The loop runs relatively quickly, but the animations are queued by default. This means that the code iterates i from 0 to 10 and queues each animation, but displays 10 almost immediately because the loop happens so fast. On the other hand, each animation waits for the previous animation to finish before it starts. So the animation takes much more time to complete than the loop itself.
To demonstrate with the code below, notice that the "Loop is done" message seems to appear as soon as the trigger is clicked.
One solution is to use the complete callback of jQuery's animate to advance the counter when each cycle is complete.
complete
Type: Function()
A function to call once the animation is complete, called once per matched element.
.animate( properties [, duration ] [, easing ] [, complete ] )
var calc = 0;
var elm = document.getElementById("szam");
function advance() {
calc++;
elm.innerHTML = calc;
}
$('#animate').click(function() {
for (var i = 1; i <= 10; i++) {
$(this).animate({
top: '150px'
}).animate({
left: '150px'
}).animate({
top: '0'
}).animate({
left: '0'
}, advance);
}
console.log('Loop is done.');
});
#container {
height: 200px;
width: 200px;
background-color: yellow;
}
#animate {
height: 50px;
width: 50px;
position: absolute;
background-color: rebeccapurple;
cursor: pointer;
color: white;
}
body {
margin: 0px;
padding: 0px;
}
#szam {
position: absolute;
top: 15px;
left: 85px;
font-size: 72px;
}
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-
2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous">
</script>
<div id="container">
<div id="animate">
<p>CLICK</p>
</div>
<h1 id="szam">0</h1>
</div>
Related
I have the following code:
$(function() {
$("button").click(function() {
$("#box1").animate({
left: $(window).width() - 800
}, {
complete: function() {
$("#box1").hide();
}
});
$("#box2").animate({
left: $(window).width() - 800
}, {
complete: function() { // complete call back
$("#box2").hide(); // can hide or remove this element
$("#box3").animate({
right: $(window).width() - 200,
top: $(window).height() - 200
});
}
});
});
});
#box1,
#box2,
#box3 {
width: 30px;
height: 50px;
position: absolute;
text-align: center;
font-family: Times New Roman;
}
#box1 {
background-color: skyblue;
left: 0px;
top: 50px;
}
#box2 {
background-color: green;
left: 0px;
top: 120px;
}
#box3 {
background-color: black;
left: 100px;
top: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button> Start </button>
<div id="box1">
<p> BOX 1 </p>
</div>
<div id="box2">
<p> BOX 2 </p>
</div>
<div id="box3">
<p> BOX 3 </p>
</div>
I want to add another complete function that occurs after box 3 moves to its new position. Box 2 will reappear and eventually move to the left. How do I do this? Where would it go in the function so it keeps going in the animation?
Add a complete callback for box3's animation that shows box2 and animates it:
$("#box3").animate({
right: $(window).width() - 200,
top: $(window).height() - 200
}, {
complete: function() {
$("#box2").show();
// Animate box2 here...
}
});
I want the second function (blockdone) to run after the animation has finished running in the first function.
I know I can do this by putting blockdone in a callback on the animate method. But for reasons specific to the project I'm working on, I can't do this.
Is there some way to queue functions in someway in javaScript or jQuery?
https://jsfiddle.net/bazzle/mdawnrtq/
function blockmove(){
$('.block').animate({top: '100px'},{duration: 1000} ).animate({width: '0'});
};
function blockdone(){
$('p').text('Done');
};
blockmove();
blockdone();
Under the assumption that you know the selection on which the animations run, you can do this via the jQuery queue function. It literally allows you to specify a function that should be called when all other functions in the queue have completed.
You can specify a name of queue, as more than one queue can be created for a selection, but the default queue this function works on is the queue in which effects (.animate()) are stored. That is precisely what you want, hooray!
function blockmove() {
$('.block').animate({
top: '100px'
}, {
duration: 1000
}).animate({
width: '0'
});
};
function blockdone() {
$('p').text('Done');
};
blockmove();
$('.block').queue(blockdone); // <-- CHANGED
html,
body {
margin: 0;
}
.block {
background-color: red;
width: 100px;
height: 100px;
display: block;
position: relative;
}
p {
position: absolute;
top: 1em;
right: 1em;
text-align: right;
display: block;
margin: 0;
}
<div class="block"></div>
<p></p>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
Maybe this is not very ambitious, but since you know the duration of your animation, you could use setTimeout function to delay appearing the text?
function blockmove(){
$('.block').animate({top: '100px'}, {duration: 1000}).animate({width: '0'});
setTimeout(() => {
$('p').text('Done');
}, 1400);
};
blockmove();
html, body {
margin: 0;
}
.block {
background-color: red;
width: 100px;
height: 100px;
display: block;
position: relative;
}
p {
position: absolute;
top: 1em;
right: 1em;
text-align: right;
display: block;
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block">
</div>
<p></p>
I think you recive callback argument.
You have to change code below
function blockmove(callback){
$('.block').animate({top: '100px'},{duration: 1000} ).animate({width: '0'},
function(){
if(typeof callback === "function") callback();
});
};
I'm trying to use jquery to animate a series of words I'm trying to just get one word to roll down into view then stay for a half second and then disappear out of view by rolling down (like a lotto machine).
The overflow for the div is hidden so the words are out of view at top: -20 and at top: 20 but in view around top 5 or top 0. But each time the setInterval runs it displays the .rw-word at a different location, also the timing seems to be off....
Here's what I have so far:
html :
<div id="login-modal" class="modal">
<section class='rw-wrapper'>
<h3 class='rw-sentance'>LOG IN TO START
<div class="rw-words">
<span class="rw-word">COLLECTING</span>
</div>
</h3>
</section>
css:
.rw-wrapper {
width: 80%;
position: relative;
padding: 10px;
}
.rw-sentance {
overflow: hidden;
height: 21px;
}
.rw-sentance span {
white-space: nowrap;
}
.rw-words {
display: inline;
text-indent: 10px;
font-family: 'Permanent Marker', cursive;
position: relative;
}
.rw-words span {
opacity: 1;
max-width: 40%;
color: #F58835;
font-size: 25px;
letter-spacing: 2px;
position: absolute;
top: -25px;
}
javascript:
$(document).on('click', '#account-login', function (){
wordScroll();
});
setInterval(wordScroll, 2000);
function wordScroll() {
$('.rw-word').delay(200).animate({ top: '0'}, 100,function(){
$('.rw-word').delay(4000).animate({ top: '25'}, 100,function(){
$('.rw-word').css('top','-20px');
});
});
}
Fiddle
I think you should place setInterval(wordScroll, 2000); withing the click event.
$(document).on('click', '#account-login', function (){
//wordScroll();
setInterval(wordScroll, 2000);
});
function wordScroll() {
$('.rw-word').delay(200).animate({ top: '0'}, 100,function(){
$('.rw-word').delay(4000).animate({ top: '25'}, 100,function(){
$('.rw-word').css('top','-20px');
});
});
}
I try to animate a div from its original position to left of the screen, if a button was clicked. If another button is clicked then i want it to animate back to it's origin position. I was able to figure out on how to animate it from right to left, but i cant animate it back to its original position.
var left = $('#coolDiv').offset().left;
$("#b1").click(
function() {
$("#coolDiv").css({
left: left
}).animate({
"left": "0px"
}, "slow");
}
);
$("#b2").click(
function() {
$("#coolDiv").css({
right: right
}).animate({
"right": "0px"
}, "slow");
}
);
#coolDiv {
width: 50px;
height: 50px;
position: absolute;
right: 0;
background: yellow;
}
#b1 {
margin-top: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="coolDiv">cool</div>
<button id="b1">left</button>
<button id="b2">right</button>
http://jsfiddle.net/XqqtN/5385/
Set the left CSS to the window width minus the width of the box.
$("#b1").click(function() {
// Get the current left of the div
var left = $('#coolDiv').offset().left;
$("#coolDiv").css({
left: left
}).animate({
left: 0
}, "slow");
});
$("#b2").click(function() {
var left = $(window).width() - $('#coolDiv').width();
$("#coolDiv").css({
left: 0
}).animate({
left: left
}, "slow");
});
#coolDiv {
width: 50px;
height: 50px;
position: absolute;
right: 0;
background: yellow;
}
#b1 {
margin-top: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="coolDiv">cool</div>
<button id="b1">Left</button>
<button id="b2">Right</button>
Optimized Code:
// Common function to animate Div on both button clicks
function animateDiv(left, right) {
$('#coolDiv').css({
left: left
}).stop(true, true).animate({
left: right
}, 'slow');
}
$('#b1').click(function() {
animateDiv($('#coolDiv').offset().left, 0);
});
$('#b2').click(function() {
animateDiv(0, $(window).width() - $('#coolDiv').width());
});
#coolDiv {
width: 50px;
height: 50px;
position: absolute;
right: 0;
background: yellow;
}
#b1 {
margin-top: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="coolDiv">cool</div>
<button id="b1">Left</button>
<button id="b2">Right</button>
Can you try something simple like this?
$(function () {
$(".animateable").animate({
left: $(window).innerWidth() - 50
}, 1000, function () {
$(".animateable").animate({
left: 0
}, 1000);
});
});
* {font-family: Segoe UI; line-height: 1;}
.animateable {position: absolute; width: 50px; text-align: center; background-color: #ccf; line-height: 2em;}
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div class="animateable">
Hi
</div>
You can use setInterval to make it work a lot of times.
$(function () {
setInterval(function () {
$(".animateable").animate({
left: $(window).innerWidth() - 50
}, 1000, function () {
$(".animateable").animate({
left: 0
}, 1000);
});
}, 2000);
});
* {font-family: Segoe UI; line-height: 1;}
.animateable {position: absolute; width: 50px; text-align: center; background-color: #ccf; line-height: 2em;}
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div class="animateable">
Hi
</div>
This is your updated code. Make changes like following:
$("#b1").click(
function() {
$("#coolDiv").animate({
"left": "0px"
},
"slow"
);
$("#coolDiv").css('right', '');
}
);
$("#b2").click(
function() {
$("#coolDiv").animate({
"right": "0px"
},
"slow"
);
$("#coolDiv").css('left', '');
}
);
#coolDiv {
width: 50px;
height: 50px;
position: absolute;
right: 0;
background: yellow;
}
#b1 {
margin-top: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div id="coolDiv">cool</div>
<button id="b1">B1</button>
<button id="b2">B2</button>
Hope it helps.
Does anyone know how I would use jQuery to subtract 1 from a current css value of several divs with the same class on a click? I have 5 divs with the same class, each have their own z-index setting. I want to subtract 1 from their current value when I click on one div. My goal is to bring one div forward on click setting z-index to 100. I then want to subtract 1 from the others' current value (whatever that is) on that same click to send them back.
$('.classname').mousedown(function() {
$(this).css("z-index", "100");
$(this).siblings().css("z-index", - 1);
});
});
This code just sets all the siblings z-index to -1.
Thanks for any help. I'm also open to suggestions on a better way to do this.
You can give the css() method a function to perform some logic on the current value. Try this:
$('.classname').mousedown(function() {
$(this)
.css("z-index", "100")
.siblings().css("z-index", function(i, val) {
return parseInt(val, 10) - 1;
});
});
So basically, you want to do this?
var divs = document.getElementsByClassName('classname');
function setZIndex(div) {
div.style.zIndex = window.getComputedStyle(div).zIndex - 1;
}
function handler(e) {
[].forEach.call(divs, setZIndex);
e.target.style.zIndex = 100;
}
[].forEach.call(divs, function(div) {
div.addEventListener('click', handler, false);
});
.classname {
width: 20px;
height: 20px;
border-style: solid;
border-width: 1px;
}
#one {
position: absolute;
top: 0px;
left: 0px;
background-color: red;
z-index: -1;
}
#two {
position: absolute;
top: 15px;
left: 10px;
background-color: blue;
z-index: -1;
}
#three {
position: absolute;
top: 30px;
left: 20px;
background-color: yellow;
z-index: -1;
}
#four {
position: absolute;
top: 45px;
left: 30px;
background-color: green;
z-index: -1;
}
#five {
position: absolute;
top: 60px;
left: 40px;
background-color: white;
z-index: -1;
}
<div id="one" class="classname"></div>
<div id="two" class="classname"></div>
<div id="three" class="classname"></div>
<div id="four" class="classname"></div>
<div id="five" class="classname"></div>