I'd like to create two functions without using jQuery to scroll from top to bottom and bottom to top with a timeout.
My code using jQuery (it works) :
function scrollToTop() {
setTimeout(function() {
$('html, body').animate({ scrollTop: 0 }, {
duration: 10000,
complete: function() {
scrollToBottom();
}
});
}, 10000);
}
function scrollToBottom() {
setTimeout(function() {
$('html, body').animate({ scrollTop: $(document).height() }, {
duration: 10000,
complete: function() {
scrollToTop();
}
});
}, 10000);
}
scrollToBottom();
You can use this:
// top
setTimeout(() => window.scrollTo(0,0), 1000);
// bottom
setTimeout(() => window.scrollTo(0, document.body.scrollHeight), 1000);
You could use the scroll method, it's a native method and also has a option for different behavior.
function scrollToTop() {
setTimeout(function() {
window.scroll({
top: 0,
left: 0,
behavior: 'smooth'
});
}, 10000);
}
function scrollToBottom() {
setTimeout(function() {
window.scroll({
top: 1000,
left: 0,
behavior: 'smooth'
});
}, 10000);
}
Related
https://jsfiddle.net/rabelais/6rdzb1x9/
Please see the fiddle above.
When user clicks on the work link the first menu slides out.
When the user clicks on the Igna link a second menu slides out.
When the user clicks on the menu link again both menus slide away.
Question: How do I re-code this so that the first menu slides away only when the second menu has finished sliding back away?
$('#menu').click(function () {
if ($('#fatal').css('display') == 'none') {
$('#fatal').animate({ left: 'toggle' }, 300);
window.setTimeout(function () {
$('#igna, #black').slideToggle("slow");
}, 100);
}
else {
$('#black, #igna, #igna-1').slideUp("fast");
window.setTimeout(function () {
$('#fatal, #igna-2').animate({ left: 'hide' }, 300);
}, 300);
}
});
$('#igna').click(function () {
if ($('#igna-2').css('display') == 'none') {
$('#igna-2').animate({ left: 'show' }, 300);
window.setTimeout(function () {
$('#igna-1').slideToggle("slow");
}, 300);
}
else {
$('#igna-1').slideToggle("fast");
window.setTimeout(function () {
$('#igna-2').animate({ left: 'hide' }, 300);
}, 300);
}
});
As I mentioned in my comment you can use the callback function within slideToggle() and animate(). This will trigger an event after the animation has been completed. I only modified the $('#menu') click event for this and left the rest the same.
Fiddle
$('#menu').click(function() {
if ($('#igna-1').css('display') != 'none') {
$('#igna-1').slideToggle("fast", function() {
$('#igna-2').animate({
left: 'hide'
}, 300, function() {
$('#black, #igna, #igna-1').slideUp("fast", function() {
$('#fatal, #igna-2').animate({
left: 'hide'
}, 300);
});
});
});
} else if ($('#fatal').css('display') == 'none') {
$('#fatal').animate({
left: 'toggle'
}, 300, function() {
$('#igna, #black').slideToggle("slow");
});
} else {
$('#black, #igna, #igna-1').slideUp("fast", function() {
$('#fatal, #igna-2').animate({
left: 'hide'
}, 300);
});
}
});
I'm trying to get this jQuery animated counter to trigger as soon as the user scrolls more than 200 pixels down the page:
Original jQuery code from here
$('.Count').each(function () {
var $this = $(this);
jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
duration: 1000,
easing: 'swing',
step: function () {
$this.text(Math.ceil(this.Counter));
}
});
});
I've tried to wrap it in the following jQuery but it doesn't trigger the animation until the end:
$(window).scroll(function() {
if ($(window).scrollTop() > 200) {
$('.Count').each(function () {
var $this = $(this);
jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
duration: 1000,
easing: 'swing',
step: function () {
$this.text(Math.ceil(this.Counter));
}
});
});
}
});
HTML:
<span class="Count">100</span>
<br/>
<span class="Count">200</span>
<br/>
<span class="Count">300</span>
The fiddle from the other post is here
What would be the best way to trigger the jQuery counter as soon as the user scrolls into view or 200 pixels down the page? I've also tried the jQuery Wayfinder but not had any luck with making it work.
Unbind the scroll handler (with $(window).off("scroll")) before triggering the animation to prevent the animation from restarting if the user continues to scroll.
$(window).scroll(startCounter);
function startCounter() {
if ($(window).scrollTop() > 200) {
$(window).off("scroll", startCounter);
$('.Count').each(function () {
var $this = $(this);
jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
duration: 1000,
easing: 'swing',
step: function () {
$this.text(Math.ceil(this.Counter));
}
});
});
}
}
body {
font-family: sans-serif;
height: 300vh;
}
.Count {
position: fixed;
top: 8px;
left: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Count">100</div>
Gilly's answer is a good one,
but it's missing the part for making it start at 0 and get to a certain value;
this is what you could do:
var stop = $("#someElement").offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() > stop ) {
$(window).off("scroll");
$('.Count').each(function () {
var $this = $(this);
jQuery({ Counter: 0 }).animate({ Counter: $this.attr("data") }, {
duration: 1000,
easing: 'swing',
step: function () {
$this.text(Math.ceil(this.Counter));
}
});
});
}
});
body {
font-family: sans-serif;
height: 300vh;
}
.Count {
position: fixed;
top: 8px;
left: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Count" data=200>0</div>
maybe a little late, but this code works when you get at the bottom of the page
jQuery(
function($)
{
var banderaEstandar= true;
$('#vista').on('scroll', function()
{
if($(this).scrollTop() + $(this).innerHeight()>=$(this)[0].scrollHeight && banderaEstandar)
{
$('.count').each(function () {
$(this).prop('Counter',0).animate(
{
Counter: $(this).text()
},
{
duration: 1000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
banderaEstandar=false;
}
})
}
);
So, i'm trying to run 2 animation at the same time on mouseover
However, after using queue:false they still running one after another :(
here's what i got:
$(document.body).on('mouseover', '.j-ad-slide', function(e) {
e.preventDefault();
$('.j-ad-slide').animate({
height: '370px'
}, {
duration: 500,
queue: false,
complete: function() { /* Animation complete */ }
});
$('.side-nav, .sub-menu').animate({
top: '422'
}, {
duration: 500,
queue: false,
complete: function() { /* Animation complete */ }
});
});
Any idea on what I'm doing wrong? BTW: .side-nav and .sub-menu elements are position:fixed - I think that's the problem. I'm not sure how to work around that :(
Your code should work fine. Here is a fiddle for you.
$(document.body).on('mouseover', '.animate', function(e) {
e.preventDefault();
$('.animate').animate({
height: '370px'
}, {
duration: 500,
queue: false,
complete: function() { /* Animation complete */ }
});
$('.animate2').animate({
left: '100'
}, {
duration: 500,
queue: false,
complete: function() { /* Animation complete */ }
});
});
fiddle with fixed position
I'm quite new to javascript and I'm having a difficult time with this multi function call
This bit is running fine
$('.pages').live("swiperight", function () {
if (!menuStatus) {
$(".ui-page-active").animate({
marginLeft: "165px",
}, 300, function () {
menuStatus = true
});
}
});
and I'd like to add
(document).scrollTop(0);
so that a user will be taken to the top of long pages as the menu opens... any help would be appreciated....
You should be able to use something like this to perform your scroll:
$("html, body").animate({ scrollTop: 0 }, "slow");
So if you wanted to add this to your current function as shown: (you can place it wherever you would like it to occur)
$('.pages').on("swiperight", function () {
if (!menuStatus) {
$(".ui-page-active").animate({
marginLeft: "165px",
}, 300, function () {
menuStatus = true
});
//Perform scroll-to-top action
$("html, body").animate({ scrollTop: 0 }, "slow");
}
});
additionally, this could should also work (as mentioned by Jan):
$('document').on("swiperight",".pages", function () {
if (!menuStatus) {
$(".ui-page-active").animate({
marginLeft: "165px",
}, 300, function () {
menuStatus = true
});
//Perform scroll-to-top action
$("html, body").animate({ scrollTop: 0 }, "slow");
}
});
How do I make this script disable animation if it's already animating?
<script type="text/javascript">
$(document).ready(function() {
$("#nav").hover(
function() {
$("#header-wrapper").animate({height:140},500);
$("#dropdown").animate({height:100},500);
},
function() {
$("#header-wrapper").animate({height:40},500);
$("#dropdown").animate({height:0},500);
}
);
});
</script>
I'm really new to jQuery and what I've found through searching hasn't really helped.
Use .stop()
$("#nav").hover(
function() {
$("#header-wrapper").stop(true,false).animate({height:140},500);
$("#dropdown").stop(true,false).animate({height:100},500);
},
function() {
$("#header-wrapper").stop(true,false).animate({height:40},500);
$("#dropdown").stop(true,false).animate({height:0},500);
}
);
Use the .stop() jQuery function
$("#dropdown").stop().animate({height:0},500);
try this:
$("#nav").hover(function() {
if (!$("#header-wrapper").is(':animated')) {
$("#header-wrapper").animate({
height: 140
},
500);
$("#dropdown").animate({
height: 100
},
500);
} else {
$("#header-wrapper").stop(true, false).css('height', $("#header-wrapper").height());
$("#dropdown").stop(true, false).css('height', $('#dropdown').height());
}
},
function() {
if (!$("#header-wrapper").is(':animated')) {
$("#header-wrapper").animate({
height: 40
},
500);
$("#dropdown").animate({
height: 0
},
500);
} else {
$("#header-wrapper").stop(true, false).css('height', $("#header-wrapper").height());
$("#dropdown").stop(true, false).css('height', $("#dropdown").height());
}
});