I've created a menu for mobile which is hidden and replaced by a burger menu on scroll. Originally I was using jQuery .fadein() and .fadeOut() which was working fine. I wanted them to slide in and out at the same time though so I used .animate() and noticed that it only animates when the scrolling stops. Is there any way to make it animate immediately while scrolling?
Here's a fiddle with the problem
And here's the code:
HTML
<div>
<div class="fade">
menu
</div>
<button id="button" style="background: url(https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png) no-repeat center; background-size: 30px 30px;"></button>
CSS
body {
height: 5000px;
}
.fade {
right:0px;
top: 20px;
position: fixed;
height: 70px;
width: 50px;
background-color: #d15757;
color: #fff;
padding: 10px;
}
#button {
top: 20px;
right: -20px;
opacity:0;
position: fixed;
height: 30px;
width: 30px;
}
Javascript
// detect size of window (i.e. detect mobile)
var mq = window.matchMedia('all and (max-width: 700px)');
// hide menu and display button on scroll
$(window).scroll(function() {
if(mq.matches) {
//width of browser is bigger than 700px
if ($(this).scrollTop()>100)
{
$('.fade').stop().animate({ // menu goes out
right: '-20px',
opacity: '0',
});
$('#button').stop().animate({ // button comes in
right: '30px',
opacity: '1',
});
}
else
{
$('.fade').stop().animate({ // menu comes in
right: '0px',
opacity: '1',
});
$('#button').stop().animate({ // button goes out
right: '-20px',
opacity: '0',
});
}
} else {
// the width of browser is less then 700px
}
});
$(document).ready(function(){
if(mq.matches) {
// the width of browser is more then 500px
$("#button").click(function(){
$(".fade").stop().animate({ // menu comes in
right: '0px',
opacity: '1',
});
$("#button").stop().animate({ // button goes out
right: '-20px',
opacity: '0',
});
});
} else {
// the width of browser is less then 500px
}
});
You called stop() on every scroll event, so the animate will stop.
A trick is adding a class to the menu
// hide menu and display button on scroll
$(window).scroll(function() {
if(mq.matches) {
//width of browser is bigger than 700px
if ($(this).scrollTop()>100)
{
if(!$('.fade').is('.hidden')) {
$('.fade').stop().animate({ // menu goes out
right: '-20px',
opacity: '0',
}).addClass('hidden');
$('#button').stop().animate({ // button comes in
right: '30px',
opacity: '1',
});
}
}
else
{
if($('.fade').is('.hidden')) {
$('.fade').stop().animate({ // menu comes in
right: '0px',
opacity: '1',
}).removeClass('hidden');
$('#button').stop().animate({ // button goes out
right: '-20px',
opacity: '0',
});
}
}
} else {
// the width of browser is less then 700px
}
});
see JSFiddle here
Related
I'm trying to make my header fixed when the user scroll down. The problem is if the content on the page is not big enough the screen hopping. Also when I scroll to the top again it change from fixed to normal very hard. Can someone help me with this?
window.addEventListener('scroll', function() {
if($(window).scrollTop() == 0) {
$('.sticky-wrapper').removeClass('stickynow');
} else {
$('.sticky-wrapper').addClass('stickynow');
}
});
I don't really understand what 'screen hopping' means, but i guess what happens is that when your header becomes position:fixed, it doesn't occupy space anymore so the content moves up to fill that space an thus, 'hopping'.
You should add margin-top to your content ( or whichever element is right after the header in HTML structure ) equal to the header's height.
See below
window.addEventListener('scroll', function() {
let header = $('.sticky-wrapper')
if ($(window).scrollTop() == 0) {
$(header).removeClass('stickynow');
$('section').css({
'margin-top': 0
})
} else {
$(header).addClass('stickynow');
$('section').css({
'margin-top': $(header).height()
})
}
});
header {
width: 100%;
height: 100px;
background: red;
}
.stickynow {
position: fixed;
background: blue;
top: 0;
left: 0;
}
section {
height: 1000px;
width: 100%;
background: green;
}
body,
html {
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="sticky-wrapper"></header>
<section>Not 'Hopping'</section>
OPTION B. Without javascript/jQuery
If you don't need to add a class or something else that involves javascript/jQuery, you can have the same result as above, but only with css
header {
position: fixed;
background: blue;
top: 0;
left: 0;
height:100px;
width:100%;
}
section {
height: 1000px;
width: 100%;
background: green;
margin-top:100px; /*add this*/
}
body,
html {
margin: 0;
}
<header class="sticky-wrapper"></header>
<section>Not 'Hopping'</section>
I have one div hidden out of page and one part is visible like:
div{
left: -100px;
width: 150px;
height: 50px;
}
I used jquery to show whole div:
$("div").hover(function(){
$("div").animate({left: '0px'});
},function(){
$("div").animate({left: '-100px'});
});
When I hover over the div and quickly unhover over it multiple times, It seems to play the animation the same amount of times I do this. How can I make it stop mid-animation if I stop hovering over the div, and how can I make the animation start only after I have hovered over it for a certain amount of time.
You can use .stop() to stop the previous animation.
$("div").hover(function() {
$("div").stop().animate({
left: '0px'
}, "slow");
}, function() {
$("div").stop().animate({
left: '-100px'
});
}, "slow");
div {
left: -100px;
width: 150px;
height: 50px;
background-color: blue;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div></div>
If you want it to wait until you've been hovering for a bit before the animation starts, you can use setTimeout, and you can cancel the timeout in the unhover function.
var hoverTimer;
$("div").hover(function() {
hoverTimer = setTimeout(function() {
$("div").stop().animate({
left: '0px'
}, "slow");
}, 1000);
}, function() {
clearTimeout(hoverTimer);
$("div").stop().animate({
left: '-100px'
});
}, "slow");
div {
left: -100px;
width: 150px;
height: 50px;
background-color: blue;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div></div>
I want to show my div when the user generates the trigger. The animation which I want to use showing the div is such that the div is rendered starting from its centre and then gaining its height by expanding in both directions(up and down) gradually. Here is the snippet of what I have tried. The div starts rendering from left. What I want is it starts rendering from middle of its height.
$("#km1").click(function() {
$(".homePopup").animate({
width: "730px",
height: "200px"
}, 800);
})
.homePopup {
position: absolute;
z-index: 100;
width: 400px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Know more
<div class="homePopup"></div>
You could animate the margin as well to achieve this effect.
Set the initial margin-top and margin-bottom half of the final height; and margin-left and margin-right half of the final width. Then when you increase the width and height, decrease the margin as well.
$("#km1").click(function() {
$(".homePopup").animate({
width: "730px",
height: "200px",
margin: '0'
}, 800);
})
.homePopup {
position: absolute;
z-index: 100;
width: 0px;
margin: 100px 365px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Know more
<div class="homePopup"></div>
I divided the width and height by four to and added that to the left and top to obtain the center animation requested.
$("#km1").click(function() {
$(".homePopup").animate({
width: "730px",
height: "200px",
left: "0px",
top: "0px"
}, 800);
})
.homePopup {
position: absolute;
z-index: 100;
width: 400px;
background-color: red;
left: 182px;
top: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Know more
<div class="homePopup"></div>
You need to position the element in the middle from the beginning. I'm setting the left absolute position to 50%, then moving the element back -50% of itself so that it is in the middle.
Check out CSS transform:
http://css-tricks.com/almanac/properties/t/transform/
$("#km1").click(function() {
$(".homePopup").animate({
width: "730px",
height: "200px"
}, 800);
})
.homePopup {
position: absolute;
z-index: 100;
width: 0;
background-color: red;
left: 50%;
transform: translateX(-50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Know more
<div class="homePopup"></div>
******UPDATE******
Here is the css to run the animation from the middle of the window's height:
.homePopup {
position: absolute;
z-index: 100;
width: 0;
background-color: red;
top: 50%;
transform: translateY(-50%);
}
I want to design a webpage like this...can anyone help me..how to do this
demo is here http://www.valentinagallo.us/site/#/home
any help would be appreciated
I created basic script special for you. Please see my idea for the solution.
First you must create DIV with fixed position and set the z-index to hide real content. Now, you can create DIV with two slide sections: left and right to animate and put contents dynamically.
See the demo: http://jsfiddle.net/luckyjquery/q2hLfo2q/
NOTE: This is basic code to show you my idea. I can develop it for you.
The HTML:
<button>Change slide</button>
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
The CSS:
.content {
position: relative;
height: 350px;
width: 90%;
overflow: hidden;
}
.content > div {
position: absolute;
height: 100%;
width: 50%;
top: 0px;
}
.content .left{
left: 0px;
background-color: #d93434;
}
.content .right{
right: 0px;
background-color: #b3d934;
}
The jQuery:
;(function ($) {
//Functions
var fns = {
/*Select basic elemments */
button: $('button'),
leftBox: $('.left'),
rightBox: $('.right'),
/* Initialize */
init: function(){
//Click the button
fns.button.on('click', function(e){
e.preventDefault();
//Change slide
fns.changeSlide();
});
},
/*Animate the DIVs*/
changeSlide: function(){
//Animate the left div
fns.leftBox.animate({
top: '-='+fns.leftBox.height(),
opacity: 0.0
}, 255, function(){
/* You can change content in this place*/
}).animate({
top: 0,
opacity: 1.0
}, 255);
//Animate the right div
fns.rightBox.animate({
top: '+='+fns.leftBox.height(),
opacity: 0.0
}, 255, function(){
/* You can change content in this place*/
}).animate({
top: 0,
opacity: 1.0
}, 255);
}
};
//Start
fns.init();
})(jQuery); //The end
I´m trying to make a full screen black bg with opacity, it appears smoothly when the mouse enters to the body and fade out smoothly when the user leaves the body of the page (which is the whole nav content screen).
I´m trying doing it with this script:
$("body").bind('mouseover', function() {
$("#bg_black").fadeIn("slow", 0.33);
});
$("body").bind('mouseleave', function() {
$("#bg_black").fadeOut();
});
with this css:
#bg_black{
position: absolute;
z-index: 1;
background: black;
opacity: 0.5;
width: 100%;
height: 100%;
display: none;
}
But the fadeout doesn´t works and also the fadeIn is very quickly and heavy.
Any ideas to achieve it, to make it also IE compatible? (not using css3)
I got this working by adding a div to body.
<div id="bg"></div>
styled it with css
#bg {
// so if user scrolls it doesn't matter
position: fixed;
background-color: black;
// expand to height & width
height: 100%;
width: 100%;
margin: 0;
padding:0;
// hidden initially
opacity: 0;
}
body {
background-color: white;
}
javascript to fadeIn and fadeOut
$("#bg").hover(function() {
// should user hover in and out quickly stop animations
$(this).stop().animate({ opacity: 1 }, 1000);
}, function( ) {
// should user hover in and out quickly stop animations
$(this).stop().animate({ opacity: 0 }, 1000);
});
Demo here
Try with this one:
$(function(){
$("body").hover(function() {
$("#bg_black").fadeIn("slow");
},function(){
$("#bg_black").fadeOut("slow");
});
});