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...
}
});
Related
I have 2 blocks - one with fixed position and the other next to it. I would like the fixed block to increase in length after clicking the button, and the second block to decrease in size and to click everything again to return it to its original state. Fixed block will be sidebar menu, permanently glued.
Everything should happen at 100% width.
How to do it, but the important thing is that the width of the fixed block and the latter should be specified in pixels, not in percent.
Is this to be done?
jQuery(document).ready(function($) {
jQuery(".btn").click(function() {
var div1 = jQuery(".left");
var div2 = jQuery(".right");
if (div1.width() < 200) {
div1.animate({
width: "25%"
}, {
duration: 200,
specialEasing: {
width: "linear"
}
});
div2.animate({
width: "75%"
}, {
duration: 200,
specialEasing: {
width: "linear"
}
});
} else {
div1.animate({
width: "5%"
}, {
duration: 200,
specialEasing: {
width: "linear"
}
});
div2.animate({
width: "95%"
}, {
duration: 200,
specialEasing: {
width: "linear"
}
});
}
});
});
.container {
width: 100%;
margin: 0 auto;
}
.left {
float: left;
position: fixed;
width: 5%;
height: 100%;
background: pink;
z-index: 5;
}
.right {
float: right;
position: relative;
width: 95%;
height: 300px;
background: green;
}
.content {
float: left;
position: relative;
width: 100%;
height: 100px;
background: silver;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="left">
<input type="button" value="click" class="btn">
</div>
<div class="right">
<div class="content"> abc </div>
</div>
</div>
Everything should happen at 100% width.
... in pixels, not in percent.
Are you sure that it's not the opposite? It's way more better to try to make yor css based on % rather that px or rem (unless it's required to do it in px)
In any case, I fixed your code, but in %, from now on you can play with px if that's the requirement:
jQuery(document).ready(function($) {
jQuery(".btn").click(function() {
var leftDiv = jQuery(".left");
var rightDiv = jQuery(".right");
console.log("leftDiv width: " + leftDiv.width() +
" - " + "rightDiv width: " + rightDiv.width())
var minWidthForRight = $('.container').width() - 300;
var maxWidthForRight = $('.container').width() - 100;
if (leftDiv.width() < 200) {
leftDiv.animate({
width: "300px",
}, {
duration: 200,
specialEasing: {
width: "linear"
}
});
rightDiv.animate({
width: minWidthForRight
}, {
duration: 200,
specialEasing: {
width: "linear"
}
});
} else {
leftDiv.animate({
width: "100px"
}, {
duration: 200,
specialEasing: {
width: "linear"
}
});
rightDiv.animate({
width: maxWidthForRight
}, {
duration: 200,
specialEasing: {
width: "linear"
}
});
}
});
});
.container {
width: 100%;
margin: 0 auto;
}
.left {
float: left;
position: fixed;
width: 150px;
height: 300px;
background: pink;
z-index: 5;
}
.right {
float: right;
position: relative;
width: 95%;
height: 300px;
background: green;
resize: horizontal;
}
.content {
float: left;
position: relative;
width: 100%;
height: 100px;
background: silver;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="left">
<input type="button" value="click" class="btn">
</div>
<div class="right">
<div class="content"> abc </div>
</div>
</div>
EDIT
Yes, it is possible to keep the left side in px and the left side in %, not % itself but calculated in px based on screen resolution.
Basically you take the container width and "eliminate" the width that you specified in animation:
var minWidthForRight = $('.container').width() - 300;
The right side will be: 300 + (100% - 300 ) and same for left: 100 + (100% - 100 )
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>
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.
I'm simply wanting a static button/image/div on a page which onclick activates a separate div to slide from the right side of the screen. This link is virtually what I want:
http://jsfiddle.net/yHPTv/876/
The problem is, is that I don't want the button to slide with it, that should remain in a static position on the page. I'd then like a 'close' button within the newly visible div.
$(function () {
$("#clickme").toggle(function () {
$(this).parent().animate({right:'0px'}, {queue: false, duration: 500});
}, function () {
$(this).parent().animate({right:'-280px'}, {queue: false, duration: 500});
});
});
body {
overflow-x: hidden;
}
#slideout {
background: #666;
position: absolute;
width: 280px;
height: 80px;
top: 45%;
right:-280px;
padding-left: 20px
}
#clickme {
position: absolute;
top: 0; left: 0;
height: 20px;
width: 20px;
background: #ff0000;
}
#slidecontent {
float:left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slideout">
<div id="slidecontent">
Yar, there be dragonns herre!
</div>
<div id="clickme">
</div>
</div>
One possible solution is to instead slide the content div. Something like:
http://jsfiddle.net/yHPTv/877/
Updated CSS:
#slidecontent {
position: absolute;
right: 0px;
}
Updated JS:
$(function () {
$("#clickme").toggle(function () {
$(this).siblings("#slidecontent").animate({right:'280px'}, {queue: false, duration: 500});
}, function () {
$(this).siblings("#slidecontent").animate({right:'0px'}, {queue: false, duration: 500});
});
});