I have this code:
$(window).scroll(function () {
if ($(this).scrollTop() > ($animate.headline.height() + 100)) {
$animate.header.velocity({height: "50px"}, { queue: false });
} else {
$animate.header.velocity({height: "100px"}, { queue: false });
}
});
If user scrolls xxx pixels from top then animation should start, and that works just fine.
One thing I just noticed and it bothers me - every time I scroll, velocity animation is checking that scrollTop, so overall animation isn't smooth when I'm scrolling, because before animation is triggered function is checking scroll.
Is there any other way to make it smooth?
Example:
http://codepen.io/anon/pen/bIkqF
Would you prefer a CSS approach instead?
Set your header's css to :
-webkit-transition: all 0.5s;
position:fixed;
top:0;
left:0;
Add a new class for the desired height:
.shrink{
height:50px;
}
And in you js toggle the class :
var header = $('.header');
$(window).on('scroll', function () {
if ($(this).scrollTop() > (header.height() + 20)) {
header.addClass('shrink');
} else {
header.removeClass('shrink');
}
});
Tinker with the seconds property of transition for a smoother effect.
This way the GPU does the heavy lifting and class toggles performance hit is negligible.
Demo
You should throttle your check with some library like Ben Alman's one : https://raw.githubusercontent.com/cowboy/jquery-throttle-debounce/v1.1/jquery.ba-throttle-debounce.min.js.
Check this documentation page : http://benalman.com/projects/jquery-throttle-debounce-plugin/.
For your example, you can use it like this :
$(window).scroll($.throttle(250, checkTop));
function checkTop() {
if ($(this).scrollTop() > ($animate.headline.height() + 100)) {
$animate.header.velocity({height: "50px"}, { queue: false });
} else {
$animate.header.velocity({height: "100px"}, { queue: false });
}
}
Related
How can I use this code with fadein()?
$(window).scroll(function() {
$("div").each(function() {
if ($(window).scrollTop() > $(this).offset().top - 100) {
$(this).css('opacity', 1);
} else {
$(this).css('opacity', 0);
}
});
});
I suggest you to use the fadeTo() function. It's really simple and it changes the opacity of an object.
This is the code to fade:
$(selector).fadeTo(duration,opacity,complete);
The duration is expressed in milliseconds, the target must be between 0 and 1, where 1 visible and 0 is not. The last parameter is a function to execute when the fade has ended. If you want to fade to 1, use this code :
$(window).scroll(function() {
$("div").each( function() {
if( $(window).scrollTop() > $(this).offset().top - 100 ) {
$(this).fadeTo(500,1);
} else {
$(this).fadeTo(500,0);
}
});
});
This lets you fade in your object. Anyway, I think that your trying to fade in an object when you are scrolling, and this couldn't be the best way to do this.
References :
https://api.jquery.com/fadeTo/
I'm trying to change the Opacity of an element when I scroll down. and change the opacity back to its normal state when I scroll back to the top. But I'm having problems doing this.
#menu
{
opacity:0.6
}
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$( "#menu" ).fadeTo("fast", 1);
} else {
$( "#menu" ).fadeTo("fast", 0.6);
}
});
The above code doesn't work or in some cases it works after a bit and stops again! I'm really confused cause I tried the code below to simply fade it and it works without a hitch.
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$( "#menu" ).fadeOut();
} else {
$( "#menu" ).fadeIn();
}
});
I would do this:
$(window).scroll(function ()
{
if (window.pageYOffset > 100)
{
$('#menu').addClass('no-opacity');
}
else
{
$('#menu').removeClass('no-opacity');
}
});
in css:
.no-opacity { opacity:0; }
in css again: make the change happen gradually:
#menu { transition: all 0.5s linear 0s; }
First of all, I recommend to use .stop() before fadeTo method, as you are executing it on every scroll event!
After that, your two code blocks are not the same, in the first one, you are showing element (opacity 1) if scroll is greater than 100, the second code is vice versa, try this:
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$( "#menu" ).stop().fadeTo("fast", 0.6);
} else {
$( "#menu" ).stop().fadeTo("fast", 1);
}
});
jsFiddle Demo.
To make it short, you could do it like this:
js
var _st;
$(window).scroll(function ()
{
_st = $(this).scrollTop();
$('#menu').css({opacity:(_st > 100) ? 0 : 1 });
})
css
#menu { transition: opacity 0.5s linear 0s; }
What I want: I created a sort of image gallery with a thumbnail slider and I want the thumbnails to scroll when a nav button is clicked but if the button is pushed again before the animation is completed it doesn't keep adding to the que, it clears the que and only completes the current animation.
What my problem is: When the button is clicked it puts the click animation in a que and completes all the clicks in order. Maybe someone can help we word this better.
What I have tried: I have tried adding .finish() and .stop(true, true) to my js file but I can't seem to get it working right. I'm probably putting it in the wrong spot or even using the wrong thing, I don't know and so I need some help.
Here is a functioning jsfiddle: http://jsfiddle.net/ma9j6o09/2/
Some of it is not working since my images are locally hosted but the slider part for the thumbnails is.
This is my function for animating the movement; what do I add to get the effect I need?
var clicks = 0;
$("#right").click(function() {
if ( clicks < 5 ) {
clicks++;
$("#thumbContainer").animate({
left: "-=128px"
}, 500, function() {
// Animation complete.
});
}
});
$("#left").click(function() {
if (clicks > 0) {
clicks--;
$("#thumbContainer").animate({
left: "+=128px"
}, 500, function() {
// Animation complete.
});
}
});
Try this out: http://jsfiddle.net/ma9j6o09/3/
In response to your question about .stop() you would use it like this:
$("#thumbContainer").stop(true, true).animate({
left: "+=128px"
}, 500, function() {
// Animation complete.
});
});
But this will indeed not achieve what you want as it means it will stop the animation and jump to the last frame straight away so you lose the animation you wanted.
Instead use the flag I used in the fiddle which makes it impossible to even try animate whilst an animation is in progress.
var clicks = 0,
animating = false;
$("#right").click(function() {
// Only animate if we are not already animating
if ( clicks < 5 && !animating ) {
animating = true;
clicks++;
$("#thumbContainer").animate({
left: "-=128px"
}, 500, function() {
animating = false; // No longer animating
// Animation complete.
});
}
});
$("#left").click(function() {
// Only animate if we are not already animating
if (clicks > 0 && !animating) {
animating = true;
clicks--;
$("#thumbContainer").animate({
left: "+=128px"
}, 500, function() {
animating = false; // No longer animating
// Animation complete.
});
}
});
I try to make a image fadeIn effect, I set jQuery animate method to implement fade-in effect, and I found the hover event which I register in CSS have been cancelled.
I think it's weird, the method should not affect my hover effect.
Although I can re-register hover event by javascript, but it is doing an other task
Is anything I misunderstanding?
P.S. I'm trying to not to use CSS3 animation.
JS part:
$('img').animate({
'opacity': '0.5'
}, 1500);
CSS part:
img {
opacity: 0;
}
img:hover {
opacity: 1;
}
http://jsfiddle.net/aSRMR/
Use !important in css that will solve the problem
img:hover {
opacity: 1 !important;
}
Working Fiddle
You could use hover instead.
$('img').hover( function (){
console.log('hovered in');
}, function (){
console.log('hovered out');
}
Don't forget to put stop() before you do an animate.
so trying your code will look like this.
$('img').hover( function (){
console.log('hovered in');
$('img').stop().animate({'opacity': '1'}, 1500);
}, function (){
console.log('hovered out');
$('img').stop().animate({'opacity': '0.5'}, 1500);
}
Another solution, if you want to do a CSS approach, do it like this.
$('img').hover( function (){
$('img').addClass('hovered');
}, function (){
$('img').removeClass('hovered');
}
on your CSS.
img {
opacity: 0;
}
.hovered {
opacity: 1;
}
Have you also considered fading using CSS Webkit?
Is it possible to trigger a function mid way through an animation?
The animation includes a solid block which swipes over an image from top to bottom - I would like to trigger a function at the point that the image is completely covered and remove the image from the html (mid way through the animation)
My current function is -
function animateCover() {
$('#cover').animate({ bottom: '1400px'}, 4000, function() { });
}
The image is completely covered at 800px point - can I access this property to trigger a function?
since there isn't a tick counter in jQuery, you need to "emulate" it:
function animateCover() {
var
$cover = $('#cover'),
interval = setInterval(function(){
if ($cover.is(':animated')){
if (parseInt($cover.css('bottom')) > 800){
alert('trigger');
clearInterval(interval);
}
} else {
clearInterval(interval);
}
}, 13); // 13 is the minimum possible in Javascript
$cover.animate({ bottom: '1400px'}, 4000, function() { $cover.text('done'); });
}
jsFiddle: http://jsfiddle.net/emV4p/1/
What about splitting the animation into 2.
function animateCover() {
$('#cover').animate({ bottom: '700px'}, 2000, function() {
$('#imgID').hide();
$('#cover').animate({ bottom: '1400px'}, 2000 );
});
}
Updated: Here's a perfectly working solution with minimal code-
WORKING DEMO
jQuery-
$(document).ready(function(){
setInterval(function(){
$("#image").css('background-image','none');
},2000);
$("#block").animate({
bottom:'400px'
},3000);
});