Develop Reference

multiple jQuery animate using chaining not working as expected

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>

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" });

On hover slide image left (jQuery) and back if no hover

First, thanks for reading my question. I'm trying to make grid of 3 images that slide over each other when a user hovers over it. I've seen this on many websites but I don't know what this effect/plugin is called. So I made a image and a fiddle of what I'm trying to accomplish.
The start:
3 images positioned horizontally. The first image is almost completely visible except for some tab-like bars on the right. When you would hover over the second image it will slide to the left leaving only a small (again) tab-like bar on the right. The same goes for the third image. See this image I've made.
If a user doesn't hover any of the images it just goes back to the default of showing the first image and the second and third image in tab-like state.
I've also made a fiddle here to show the way the images should be animated.
But as you can see this is not perfect. Does anyone here have a snippet I could use because my jQuery skills are not there yet. But I think this (should) could be accomplished easier and with less code I think? And even maybe more elegantly.
Thanks for the (long) read...

This is simple example ;]
$('li').hover(function() {
$(this).addClass('active');
}, function(){
$(this).removeClass('active');
})
li {
width: 0;
padding: 15px;
float: right;
height: 300px;
overflow: hidden;
cursor: pointer;
color: #fff;
}
li:nth-child(1) {
background: red;
}
li:nth-child(2) {
background: green;
}
li:nth-child(3) {
background: blue;
}
li.active {
width: 400px;
transition: all 1s;
}
ul {
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>page 1</li>
<li>page 2</li>
<li>page 3</li>
</ul>

Try zAccordian jquery plugin. https://natearmagost.github.io/zaccordion/index.html

So I changed your example a bit:
What I did was:
Changed positions to relative and set overflow hidden to .wrapper
$(document).ready(function(){
$(".img-1").hover(function(){
$('.img-2').stop().animate({'left': '160px'}, 500);
$('.img-3').stop().animate({'left': '180px'}, 500);
}, function(){
$('.img-2').stop().animate({'left': '160px'}, 500);
$('.img-3').stop().animate({'left': '180px'}, 500);
});
$(".img-2").hover(function(){
$('.img-2').stop().animate({'left': '20px'}, 500);
}, function(){
$('.img-2').stop().animate({'left': '160px'}, 500);
});
$(".img-3").hover(function(){
$('.img-2').stop().animate({'left': '20px'}, 500);
$('.img-3').stop().animate({'left': '40px'}, 500);
}, function(){
$('.img-3').stop().animate({'left': '180px'}, 500);
$('.img-2').stop().animate({'left': '160px'}, 500);
});
});
.img-1 {position:relative;top:0px; background-color:red; width: 200px; Height: 50px;}
.img-2 {position:relative;top:-50px;left:160px; background-color: #1F6; width: 200px; Height: 50px;}
.img-3 {position:relative;top:-100px;left:180px; background-color: #0FF; width: 200px; Height: 50px;}
.wrapper {
border: black 1px solid;
width: 200px;
Height: 50px;
position:relative;
overflow: hidden;
top:0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="img-1">
</div>
<div class="img-2">
</div>
<div class="img-3">
</div>
</div>

You can do this completely with CSS, no need for javascript.
The example below manipulates the z-index when a div is hovered. The only tricky one is the hover of 'image-3'. The z-index of 'image-2' needs to be changed also to ensure it is on top of 'image-1'.
Therefore, in the HTML 'image-2' is placed after 'image-3'. Than in CSS 'image-2' can be addressed as a sibling.
[class^="img"] {
position: absolute;
top: 0;
left: 0;
}
.img-1 {
z-index: 3;
}
.img-1 img {
border: 6px solid #FF0;
}
.img-2 {
left: 20px;
z-index: 2;
}
.img-2 img {
border: 6px solid #F00;
}
.img-3 {
left: 40px;
z-index: 1;
}
.img-3 img {
border: 6px solid #F60;
}
div[class^="img"]:hover {
z-index: 5;
}
.img-3:hover+.img-2 {
z-index: 4;
}
<div class="wrapper">
<div class="img-1">
<img src="//placehold.it/200x50&text='image-1'" alt="">
</div>
<div class="img-3">
<img src="//placehold.it/200x50&text='image-3'" alt="">
</div>
<div class="img-2">
<img src="//placehold.it/200x50&text='image-2'" alt="">
</div>
</div>

Text flickers when replacing an image (css and jquery)

The transition of the text becoming visible over an image when hovering over the image, was smooth before I put the image and the text into one div. I put the image and text into one div so that I could position the text on top of the image. The transition is now shaky--do you know how I can fix this? Thank you.
$(document).ready(function() {
$("img").hover(function() {
$("img").stop().animate({
"opacity": "0"
}, "slow");
$(".text").css("visibility", "visible");
},
function() {
$("img").stop().animate({
"opacity": "1"
}, "slow");
$(".text").css("visibility", "hidden");
});
});
#image {
display: block;
margin: 0 auto;
height: 35%;
width: 35%;
padding-left: 5%;
overflow: hidden;
}
#imageblock {
position: relative;
overflow: hidden;
}
.text {
color: #000000;
text-align: center;
font-family: "Raleway";
font-size: 90%;
visibility: hidden;
position: absolute;
padding: 3%;
width: 100%;
bottom: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="imageblock">
<img id="image" src="http://2016.igem.org/wiki/images/8/81/T--Sydney_Australia--Peek_Banner.png">
<div class="text">
<h5>NBB4 ethylene</h5>
</div>
</div>

Bind the hover event to #imageblock instead of the images:
$(document).ready(function() {
$("#imageblock").hover(function() {
console.log("enter");
$("img").stop().animate({"opacity": "0"}, "slow");
$(".text").css("visibility", "visible");
}, function() {
console.log("leave");
$("img").stop().animate({"opacity": "1"}, "slow");
$(".text").css("visibility", "hidden");
});
});
#image {
display: block;
margin: 0 auto;
height: 35%;
width: 35%;
padding-left: 5%;
overflow: hidden;
}
#imageblock {
position: relative;
overflow: hidden;
}
.text {
color: #000000;
text-align: center;
font-family: "Raleway";
font-size: 90%;
visibility: hidden;
position: absolute;
padding: 3%;
width: 100%;
bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="imageblock">
<img id="image" src="http://2016.igem.org/wiki/images/8/81/T--Sydney_Australia--Peek_Banner.png">
<div class="text">
<h5>NBB4 ethylene</h5>
</div>
</div>
So what was going on? You bound the hover event on the image - and - you have an invisible text block covering part of the image. When you hover on the image somewhere in the middle, the hover event is fired making the text visible. Now that text covers the image making the image no longer hovered triggering the second event handler which makes the text invisible. The image is now hovered again and you have a flickers! Notice that there is no flickering if you mouse over around the edges of image i.e. the area not covered by text.

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.