prevent jumping back to top of screen jQuery animate - javascript

I have two 'screens' with different background images.
when the user clicks on the down arrow it scrolls from one 'screen' to the one below. The second screen is set to display none at the beginning. This all works as expected, however, when trying to scroll to the top of the screen again it jumps to the top as opposed to smoothly scrolling back to the top. I am also using GSAPs tween library for other animations.
Please see code below:
JS
$('.down-arrow').click(function() {
var tl = new TimelineMax();
tl.set('.background-two', {display: 'block', onComplete: scrollDown})
tl.set('.background-one', {display: 'none', delay: 0.6})
function scrollDown(){
$('html, body').animate({scrollTop: $(window).height()}, 600);
}
});
$('.up-arrow').click(function() {
var tl = new TimelineMax();
tl.set('.background-one', {display: 'block', onComplete: scrollUp})
tl.set('.background-two', {display: 'none', delay: 0.6})
function scrollUp(){
$('html, body').animate({scrollTop: 0}, 600);
}
});
CSS
.background-one {
background: url(../img/Background1.png) no-repeat center;
background-size: cover;
height: 100%;
width: 100%;
position: relative;
}
.background-two {
background: url(../img/Background2.png) no-repeat center;
background-size: cover;
height: 100%;
width: 100%;
position: relative;
}
HTML
<div class="background-one">
<div class="up-arrow">UP</div>
</div>
<div class="background-two">
<div class="down-arrow">DOWN</div>
</div>

My guess is that when you set the top block to display: block; it appears immediately and pushes down your bottom block.
What you could try instead is sliding the blocks in (By animating their heights instead of scrolling).

Does it work when you properly close your html div-tags?
Edit:
I created a fiddle, the animation works fine. You're removing (display:none) the other element, which causes the page to flicker/jump.
function scrollDown(){
$('html, body').animate({scrollTop: $(window).height()}, 600);
}
function scrollUp(){
$('html, body').animate({scrollTop: 0}, 600);
}
$('.down-arrow').click(function() {
var tl = new TimelineMax();
tl.set('.background-two', {display: 'block', onComplete: scrollDown})
tl.set('.background-one', {display: 'none', delay: 0.6})
});
$('.up-arrow').click(function() {
var tl = new TimelineMax();
tl.set('.background-one', {display: 'block', onComplete: scrollUp})
tl.set('.background-two', {display: 'none', delay: 0.6})
});
Tip: Keep your functions outside your click-handler.

Related

Check a div postion when -100% left

im trying to check a div position so when it comes to -100% left it returns to right 100%.
Im sutck in the part of checkin its position. Im using the console.log to check if it works, ive tried console.log(back1X.left) to.
$(document).ready(function(){
setInterval(function() {
var back1X = $('.back1').position();
},100);
$('.back1').animate({'left':'-100%'},50500);
console.log(back1X);
});
You can use jQuery .animate()'s complete callback to call a function when the animation ends:
$(document).ready(function() {
(function loop() {
$('.back1').css('left', '100%').animate({
'left': '-100%'
}, 2000, "linear", loop);
})();
});
.back1 {
position: absolute;
top: 0;
left: 100%;
padding: 1em;
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="back1"></div>

Animate Element to right edge of the window using Jquery?

I am trying to animate a div to the right of the window using Jquery. I am also using Jquery UI to change the color of the div. I am animating the div all over the window as well. I am just experimenting with jquery animations though, nothing critical. Any ways this is the code I have so far:
HTML:
<div id="box1"></div>
<button type="button" id="btn"> Click Me! </button>
CSS:
#box1{
width: 200px;
height: 200px;
background-color: red;
border: 0px solid black;
border-radius: 0px;
position: relative;
}
#btn{
position: fixed;
top: 600px;
display: table-cell;
font-size: 30px;
}
JQuery:
var allow = true;
var animating = false;
$("#btn").click(function(){
if(allow == true){
if(!animating){
animating = true;
$("#btn").hide();
$("#box1").animate({backgroundColor: "yellow", borderWidth: "5px"}, 1000, "linear").animate({left: "500px"}, 1000).animate({top: "500px"}, 1000);
$("#box1").animate({left: "1000px", top: "0px"}, 1000).animate({left: "500px"}, 1000).animate({top: "500px"}, 1000, function(){
allow = false;
animating = false;
$("#btn").show().text("Click Me Aagain!");
});
}
} else {
if(!animating){
$("#btn").hide();
animating = true;
$("#box1").animate({top: 0}, 1000).animate({left: 0}, 1500).animate({backgroundColor: "red", borderRadius: 0, borderWidth: 0, width: "100px", height: "100px"}, 1000, function(){
$("#btn").show().text("Start Over!");
});
animating = false;
allow = true;
}
}
});
The first variable at the top is to toggle between two different animation sequences. The next is to ensure that the animations are not triggered twice by mistake. The element I am trying to move all the way to the right is #box1 and I want it to do so at the end of the first sequence!
Thanks for your help!
There are 2 options you can do to get the box to animate to the right edge of the area.
1) You could set the css "left: auto", and animate the css "right:0". To do this you would need to take some extra steps. You would need to set css "position: absolute" to the box and would need to wrap the box in a div that has the css "position: relative" with a width of 100%. That way, the box knows where the right edge because its most immediate parent that has css "position:relative" is setting the boundary. Doing this option would require a little fine tuning because switching between animating the left position and the right position will cause some jumping.
2) This option you could continue animating the left position, but to get it to animate to the right, you would need jquery to calculate how wide the page is, and subtract the with width of the box. It would look like this:
left: ($(document).outerWidth() - $('#box1').outerWidth())

css transition on mouseover

I have the following css for my drop down menu in my banner:
#nav-menu li a
{
background-image:url('../images/menu_background.png');
background-repeat:repeat-x;
background-position: left top;
height: 35px;
}
#nav-menu li a:hover
{
background-image:url('../images/menu_background_hover.png');
background-repeat:repeat-x;
background-position: left top;
height: 35px;
}
It works fine, except that I would like some animation effect when I hover over the <li> tag. Currently, it just replaces the background colour of the <li> when i hover over it.
I tried the example code below which changes the margin-left of the li tag but I do not know how to animate the css transition on hover:
$j(document).ready(function () {
//When mouse rolls over
$j("#nav-menu li").hover(function () {
$j(this).filter(':not(:animated)').animate({
marginLeft: '9px'
}, 'slow');
},
function () {
$j(this).animate({
marginLeft: '0px'
}, 'slow');
});
});
Thanks a lot for any suggestion.
A quote from this post,
Blockquote
I guess you would have to work around this by not using genuine background-images, but div elements containing the image, positioned using position: absolute (or fixed) and z-index for stacking. You would then animate those divs.
Blockquote
I got this working by removing the j after the $ in the variable names.
Fiddle: http://jsfiddle.net/XjxBj/
$(document).ready(function () {
//When mouse rolls over
$("#nav-menu li").hover(function () {
$(this).filter(':not(:animated)').animate({
marginLeft: '9px'
}, 'slow');
},
function () {
$(this).animate({
marginLeft: '0px'
}, 'slow');
});
});​

jQuery Animate top (From bottom to top)

I am trying to animate a Div a top:275.
I tried .animate( {marginTop: -820 } but on each screen it ends up to a different position. . .
So I changed the marginTop to .animate( {top: 275} but the div comes from the top to down (slidedown). Note that, so I can use the animate:top I had to set the div to position:absolute during the animation. . .
Is there any hackyway to make the top come from the bottom up or make the marginTop have the same distance from the top on each screen resolution ? ( I assume margintop can't be solved since im setting margin top to -820 in order to get at a point of top:275, therefore screens smaller than 1200px height, the div will go much higher...)
Here is my code:
$("#features").fadeIn()
.css({
position: 'absolute'
}).animate({
top: '275'
}, function() { //callback });
Ah Found it!!
$("#features").fadeIn()
.css({top:1000,position:'absolute'})
.animate({top:275}, 800, function() {
//callback
});
So basically I've set the top from css at the very end to 1000, then animated it to 275 which is up...
$( '#features' ).show()
.css( {'opacity': 0, 'bottom': '-100px' } )
.animate( { 'opacity': '1', 'bottom' : 0 }, 1000 );
$("#btn-auto-refresh").show()
.css({
'opacity': 0,
'bottom': '-100px'
})
.animate({
'opacity': '1',
'bottom': '100px'
}, 1000);
body{
min-height:1800px;
}
.auto-refresh-Div-position {
display: flex;
justify-content: center;
}
.btn-auto-refresh {
border: none;
color: white;
padding: 5px;
border-radius: 22px;
width: 36%;
z-index: 1;
bottom:-100px;
position:fixed;
}
.bgblue {
background-color: #37A6E1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="auto-refresh-Div-position">
<button class="pf bgblue btn-auto-refresh " id="btn-auto-refresh" style="display:none"><i class="ico ico-spinner11"></i><span class="ml10">New Deals</span></button>
</div>

JQuery Animate

Really easy, I'm sure...
I have a div which is the full screen and I want it to slide down from the top to the bottom.
I have this:
$('#full-screen').animate({
"bottom":0,
height: 'toggle'
}, 1000, function() {
// Animation complete.
});
But this is the wrong way round as the bottom moves up; how do I get the bottom to stay where is is and the top to slide down to meet it?
Thanks
Your exact code works fine when you have absolute positioning on the element.
http://jsfiddle.net/hhEJD/
CSS
body {
padding: 0;
margin: 0;
}
#full-screen {
background: orange;
color: white;
width: 100%;
height: 100%;
position: absolute; // position absolute, and your code works
clip:auto;
overflow:hidden;
}​
HTML
<div id="full-screen"></div>​
Your code
$('#full-screen').animate({
"bottom":0,
height: 'toggle'
}, 1000, function() {
// Animation complete.
});
You're setting the bottom style to 0 in your animate. This has no effect if you don't use absolute positioning on your element.
You need to also animate the 'top' property of the div as well as disabling the animation queue so both animations happen at the same time.
$('#slide2').animate(
{height: '0px'},
{
duration: 1000,
queue: false, //Disable the queue so both events happen at the same time.
complete: function()
{
// animation complete
}
}
).animate( //also animate the top property
{top: '500px'},
{duration: 1000}
);​
Try it out over at jsFiddle.
You can use marginTop for it:
var h=$('#full-screen').height();
$('#full-screen')
.animate(
{marginTop: h, height: 'toggle'},
1000,
function() {
// Animation complete.
}
)
see at: http://jsbin.com/esotu3

Categories