multiple jQuery animate using chaining not working as expected - javascript

I am learning jQuery and in the effects I saw a way called "chaining" and tried this code below but, to my shock, it's not animating the 2nd passed animate() method properly, i.e. the cube div is not moving from right to left.
I can't figure out what's wrong, except the 'right' part everything is working fine.
$(document).ready(function() {
$("#anim").click(function() {
$("#cube").animate({
//here we give the parameters to change
left: '150px', //move from left to right by 150px;
opacity: '1',
width: '100px',
height: '100px'
}, 3000).animate({
right: "150px", //expected to move from right to left by 150px;
opacity: '0.4',
width: '50px',
height: '50px'
}, 3000);
});
});
.cube {
width: 50px;
height: 50px;
background-color: blueviolet;
opacity: 0.4;
position: absolute;
padding: 20px;
}
<button id="anim">animate</button>
<div id="cube" class="cube">
<p>cube</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

The issue is because left is the distance between the element and the left edge of the screen, and right is the distance between the element and the right edge of the screen.
Applying right after left does not move the element back to its original location - it's an entirely separate value.
To achieve what you require simply set left back to its original value. In this example, that's 8px:
$(document).ready(function() {
$("#anim").click(function() {
$("#cube").animate({
left: '150px',
opacity: 1,
width: '100px',
height: '100px'
}, 3000).animate({
left: '8px',
opacity: 0.4,
width: '50px',
height: '50px'
}, 3000);
});
});
.cube {
width: 50px;
height: 50px;
background-color: blueviolet;
opacity: 0.4;
position: absolute;
padding: 20px;
}
<button id="anim">animate</button>
<div id="cube" class="cube">
<p>cube</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Related

I don't understand how my jQuery code is executed. how to achieve the required animation? [duplicate]

This question already has answers here:
How to wait for one jquery animation to finish before the next one begins?
(6 answers)
Closed 1 year ago.
Here is the code
https://jsfiddle.net/zdu1efrj/
$(document).ready( function() {
// start box animation code
let animatedBox = $('.box');
animatedBox.css('backgound', 'red');
animatedBox.animate(
{
left: '500px',
height: '250px',
width: '250px'
}, 1000);
animatedBox.css('background', 'blue');
animatedBox.animate(
{
top: '500px',
height: '100px',
width: '100px'
}, 1000);
// end box animation code
});
I want the box in the animation to be red as long as it moves vertically then change its color to blue and moves down.
why isn't the code executed in sequence ?
why animatedBox.css('background', 'blue'); seems to be executed before the completion of
animatedBox.animate(
{
left: '500px',
height: '250px',
width: '250px'
}, 1000);```
?
The issue here is because the animate() call is effectively asynchronous as the actions are placed in a queue and run at a later time. However the css() calls are not queued/async and so execute immediately.
To fix this use the callback argument of the animate() method so that you change the colour of the element after the first animation sequence completes:
animatedBox.animate({
left: '500px',
height: '250px',
width: '250px'
}, 1000, function() {
animatedBox.css('background', 'blue');
});
However this can all be achieved much more effectively, and far more performantly, by using CSS alone:
body { position: relative; }
.box {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
position: absolute;
background-color: red;
animation: box-movement 2s forwards;
}
#keyframes box-movement {
50% {
left: 500px;
top: 0;
height: 250px;
width: 250px;
background-color: red;
}
100% {
left: 500px;
top: 500px;
height: 100px;
width: 100px;
background-color: blue;
}
}
<div class="box"></div>

GSAP TweenLite Rotation but not animate

I am a little new to using TweenLite. As you will see in the example, I have a div that I slide up which is all good, and I want to rotate the div itself so am using rotation 18deg however, can rotate this before the animation as appears it animated the rotation as it slides up. So I need to rotate out of view.
$(document).ready(function(){
TweenLite.to("#slide_one .background",
0.4, // set the speed
{rotation:"18deg", top:"0" // set the angel and end position
});
});
.container {
display: block;
width: 300px;
height: 250px;
border: 1px solid #000000;
overflow: hidden;
position: relative;
}
.background {
position: relative;
display: block;
width: 200%;
height: 200%;
left: -100%;
bottom: -300px;
}
.background.dark-blue {
background: #071D49;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TweenMax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="slide_one">
<div class="background dark-blue"></div>
</div>
</div>
For anyone wanting to know the solution you have to use set so does not animate
TweenLite.set(slide_one, { rotation: "18deg" });

jQuery image radial effect

I want to display image, expanded such as radial effect (from width 0 to 100%). I've tried using jQuery animated property, image work as I want but don't remains at fixed point.
js
<script>
jQuery(function(){
jQuery( "#vert img" ).animate({
width: "100%",
height: "100%",
opacity: 1
}, 1500 );
});
</script>
html
<div id="vert">
<img src="images/radial.png" alt="Radial" />
</div>
css
#vert{ width: 960px; height: 600px; position: absolute; top: 50%; left: 50%; margin-top: -333px; margin-left: -480px; }
#vert img{ width: 0; height: 0; opacity: 0; }

jQuery - Text and Image scrolling effects are not working

http://honghanhdinh.com/
I am currently developing my website and I am running into some troubles with some of the parallax tutorials I am learning.
As you can see, the plane and the words to my name "Hong" appears on on the opening page but the other 2 parts of my name "Hanh Dinh" only appears when beginning to scroll down. In addition, the plane also disappears upon scrolling and flys out from the right to the left.
I don't want the plane to appear upon entering the website but for it to naturally slide out to the left when scrolling down. I also want my full name "Hong Hanh Dinh" to appear upon entering the website--not just the Hong part.
I've tried many things to fix it but I think I'm missing something.
Here is the beginning of HTML code:
<BODY>
<!--Begin about info--!>
<MAIN>
<section id="bg" data-speed="10" data-type="background">
<div id="plane">
<img src="http://www.locanto.info/classifieds/images/airplane.png">
</div>
<div id="parallax2">
<h2 id="center" class="parallax2">Hong</h2>
<h2 id="left" class="parallax2">Hanh</h2>
<h2 id="right" class="parallax2">Dinh</h2>
</div>
</section>
Here is my CSS:
#bg {
background-color: #FFFFFF;
background-size
}
#parallax2 {
height: 800px;
margin-bottom: 600px;
overflow: hidden;
padding-top: 200px;
}
/* Parallax Scrolling text */
#center.parallax2 {
font-size: 175px;
color: #CC3333;
opacity: 0.5;
text-align: center;
left: 200px;
padding: 0;
position: relative;
bottom: 100px;
}
#left.parallax2 {
color: #336699;
font-size: 200px;
text-align: left;
left: 400px;
opacity: 0.75;
overflow: hidden;
position: relative;
}
#right.parallax2 {
color: #C5C3DE;
font-size: 250px;
text-align: right;
opacity: 0.5;
overflow: hidden;
position: relative;
width: 1200px;
bottom: -300px;
}
This is the jQuery for the "Hong Hanh Dinh" scrolling:
$(document).ready(function() {
var controller = $.superscrollorama();
controller.addTween(
'#parallax2',
(new TimelineLite()).append([
TweenMax.fromTo($('#left.parallax2'), 1, {
css: {
top: 200
},
immediateRender: true
}, {
css: {
top: -900
}
}),
TweenMax.fromTo($('#right.parallax2'), 1, {
css: {
top: 500
},
immediateRender: true
}, {
css: {
top: -1800
}
})
]), 1000 // scroll duration of tween
);
});
This is the jQuery for the flying plane:
$(document).ready(function() {
$(window).scroll(function() {
console.log($(this).scrollTop());
$('#plane').css({
'width': $(this).scrollTop(),
'height': $(this).scrollTop()
});
});
});
Please let me know if my error is in the CSS or in the jQuery. Thank you!
I think you could fix this by adding width: 0; and overflow: hidden; to your div#plane. Otherwise, follow these steps:
Step 1:
Remove the img tag from the plane div, it is not needed. Add the id to the img tag itself.
<img id="plane" src="http://www.locanto.info/classifieds/images/airplane.png">
Step 2:
#plane{
position: fixed;
right: -WIDTH OF IMAGE;
}
Step 3:
$(document).ready(function() {
$(window).scroll(function() {
$('#plane').css({
'right': $(this).scrollTop() - WIDTH OF IMAGE,
});
});
});
Your name "Hanh Dinh" does exist when it loads but it is out of our range of sight, change this line:
css: {
top: 200
}
To a number like -400 and you'll see it'll appear on screen.
(That is for Hanh, for Dinh you'll need a larger number like -900.

How to display non fixed elements above fixed elements

I have a page with both fixed and non fixed elements. I am using a div to make the background blue, and then fading it out to reveal the black background behind it in the html css. The problem is, my skyline image is not fixed, and nothing can push it above the fixed elements, not even z-indexing. What's the appropriate way to push this element above the fixed background div.
The problem in short, is I want my blue sky behind my cities.
Here's the css for the blue background div
.blue {
position:fixed;
height: 100%;
width: 100%;
background-color: #6e8eb5;
}
Here's how I'm fading it out.
$( ".blue" ).delay( 12000 ).fadeOut(2000);
Here's my jsfiddle.
http://jsfiddle.net/wzrjL68s/
Here: http://jsfiddle.net/ctwheels/wzrjL68s/5/
I've also fixed position of elements, etc. as I suppose you intended to position them
HTML
<body>
<div class="blue"></div>
<h2 id="text1">a web design demonstration</h2>
<h3 id="text2">by cory</h3>
<img id="cloud2" src="http://www.rapitech.net/wp-content/uploads/2013/11/tumblr_ms59qmrRWf1s5jjtzo1_r1_500.png">
<img id="jacksonville" src="http://upload.wikimedia.org/wikipedia/commons/f/fc/Cincinnati_Skyline_Outline.png" class="img-responsive" alt="Responsive image">
</body>
CSS
html {
background-color: black;
overflow-x: hidden;
}
body {
display: none;
background-color: #6e8eb5;
}
#cloud2 {
margin-top:800px;
left: -100px;
height:150px;
opacity: 0.4;
}
#text1, #text2 {
opacity: 0.0;
color: black;
font-family: Georgia, serif;
color: white;
position: fixed;
margin-bottom: 200px;
width: 75%;
left: 50%;
margin: 0 0 0 -37.5%;
text-align:center;
}
.blue {
position:fixed;
height: 100%;
width: 100%;
background-color: #6e8eb5;
z-index:-100;
}
JS
$("body").fadeIn(2000);
$("html, body").animate({
scrollTop: $(document).height()
}, 8000);
$("#cloud2").animate({
opacity: 0.8,
marginLeft: "110%"
}, 30000);
$("#text1").delay(1500).animate({
opacity: 0.5,
marginTop: "15%"
}, 4000);
$("#text2").delay(5000).animate({
opacity: 0.5,
marginTop: "20%"
}, 4000);
$("#text1").delay(500).animate({
opacity: 0.0,
marginLeft: "60%"
}, 2000);
$("#text2").delay(1500).animate({
opacity: 0.0,
marginLeft: "30%"
}, 2000);
$(".blue").delay(12000).fadeOut(2000);

Categories

Resources