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");
});
});
Related
Using css media query and opacity transition, I have a div that fades in when viewport is less than 640px, and it fades out when viewport is wider.
Using jquery, I also have a button that when clicked will fade out the div.
The problem i have is that after the click/jquery fade out, the div will no longer fade back in when the viewport is changed.
I'd like the div to be able to transition back and forth 100%-0% opacity via viewport change even after the user has clicked the button to fade it out.
css:
#myDiv {
position: absolute; left: 0; top: 0; width: 100vw;
opacity: 0;
transition: opacity 1.5s;
}
#media screen and (max-width: 640px) {
#myDiv {
position: absolute; left: 0; top: 0; width: 100vw;
opacity: 1;
}
}
html:
<div id="myDiv">
<div id="closeBtn" onclick="xOut();">
</div>
</div>
script
xOut = function() {
$("#myDiv").fadeOut(2000);
});
}
It seems to me that the jquery is breaking the css. I can't figure out how to fix this.
This is happening because the fadeOut function adds display:none; to the element after it faded out, which will cause issues with css transitions.
Basically what you want to do is to use a class that hides it without using display: none; You can also use styles like height: 0; pointer-events:none; to further remove it from view.
The below snippet shows how using a css class to fade it out compares to the fade out function. I am not sure if this is the functionality you are looking for, but it should help you understand what is going on.
xOut = function() {
$("#myDiv").fadeOut(2000);
}
xOutCss = function() {
$("#myDiv").addClass('faded');
}
#myDiv {
transition: opacity 2s ease;
}
.faded {
opacity: 0;
}
#media screen and (max-width: 640px) {
#myDiv {
position: absolute;
left: 0;
top: 0;
width: 100vw;
opacity: 1;
}
#myDiv.faded {
opacity: 1;
}
#fade_out_btn {
display: none;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myDiv">
<button onClick="xOut();">Fade Out</button>
<button id="fade_out_btn" onClick="xOutCss();">Fade Out Css</button>
</div>
I have a fixed bottom bar that can be collapsed on scroll, and right now to collapse it down I use :
$(".Bar").animate({
height: 0
}, 700);
$(".Bar").animate({
height: originalBuyBarHeight
}, 700);
So I change his height, which looks not good.
How would I simply slide it down outside of the screen(with all its content), then slide it up back to the original position ?
CSS:
.Bar {
position: fixed;
bottom: 0;
width: 100%;
height: 12vh;
}
you can change the bottom value
$(".Bar").animate({
bottom: 0
}, 700);
$(".Bar").animate({
bottom: '-12vh'
}, 700);
Use a class and achieve this effect with CSS:
.bar {
position: relative;
transform: translateY(0);
transition: transform .7s ease-in-out; /* you can change the time and easing */
}
.bar.moveOffscreen {
transform: translateY(110%);
}
And apply it with JS, instead of your original code:
/* code to hide it */
$(".bar").addClass('moveOffscreen');
/* code to reveal it */
$(".bar").removeClass('moveOffscreen');
Achieve this with vanilla JS, without JQuery:
/* code to hide it */
document.getElementById(".bar").classList.add('moveOffscreen');
/* code to reveal it */
document.getElementById(".bar").classList.remove('moveOffscreen');
PS: don't use capital letters at the start of your class names => Change .Bar to .bar
Here's the challenge:
I have two divs layered on top of one another in an HTML file. The top div is mostly transparent using CSS the bottom div has an image as its background. On mouseenter, I want the top div to disappear and on mouseleave I want the top div to come back.
$(document).ready(function() {
$('.dimmer').on('mouseenter', event => {
$(this).hide();
}).on('mouseleave', event => {
$(this).show();
});
});
.experience {
background: url("cmu-110.png") no-repeat center;
height: 110px;
width: 110px;
z-index: 2;
}
.dimmer {
background: rgba(238, 238, 238, .25);
position: relative;
top: -128px;
z-index: 3;
}
<div>
<div class="experience"></div>
<div class="dimmer"></div>
</div>
The jquery code snippet above is in a separate file and called in the html's head.
<head>
<!--- Some head stuff like title, meta, calling css in separate file, etc --->
<!--jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="interaction.js"></script>
</head>
Full transparency: I am new to jquery and trying to use it for the first time. Despite working through the full codecademy jquery tutorial, reading w3C school tutorial, searching other stackoverflow posts, and spending more than a reasonable amount of time, I can't seem to get this to work--probably due to a dumb mistake.
Thank you for your help!
I believe a jquery '.on( "mouseout", handler )' on the bottom div should be sufficient to make the top div visible/fade in.
This post should help you: jquery .mouseover() and .mouseout() with fade
If not (if that does not work) what I would do/suggest is:
When mouse enters the top div activate a setTimeout polling functiion or .mouseMove that runs every 1 second or so which checks the mouse position and hide the top div.
If the mouse is not on the bottom div (mousemove) , then display the top div and disable the polling.
You can seach this forum for how to write a setTimeout polling function, etc. If I have some time over the weekend I will give it a whirl...
Trust this helps.
You can set the css visibility property to hidden and visible on mouseenter and mouseleave. I put some space between two divs to make the effect visible clearly.
$(document).ready(function() {
$('.dimmer').on('mouseenter', () => {
$('.dimmer').css("visibility","hidden");
}).on('mouseleave', () => {
$('.dimmer').css("visibility","visible");
});
});
.experience {
background: red;
height: 110px;
width: 110px;
z-index: 0;
}
.dimmer {
background: blue;
position: absolute;
top: -10px;
height: 110px;
width: 110px;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="experience"></div>
<div class="dimmer"></div>
</div>
jQuery(document).ready(function(){
jQuery(".dimmer").on({
mouseenter: function () {
jQuery(this).css('opacity', '0');
},
mouseleave: function () {
jQuery(this).css('opacity', '1');
}
});
});
.experience {
background: url("http://lorempixel.com/400/200/") no-repeat center;
height: 110px;
width: 110px;
z-index: 2;
}
.imparant{
position:relative;
height: 110px;
width: 110px;
}
.dimmer {
background: rgba(238, 238, 238, .25);
position: absolute;
top: 0;
left:0;
right:0;
bottom:0;
z-index: 3;
transition:opacity 320ms;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="imparant">
<div class="experience"></div>
<div class="dimmer"></div>
</div>
You don't really need to use jQuery or javascript at all for this. You can do it with a single div, a pseudo-element, and a hover style:
.container{
position:relative;
height: 110px;
width: 110px;
background-image: url("https://randomuser.me/api/portraits/men/41.jpg");
}
.container::before{
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
transition: opacity 0.4s;
}
.container:hover::before{
opacity: 0;
}
<div class="container"></div>
If for some reason you wanted to keep the extra divs you could still do it but you'd want to change the CSS hover rule slightly. If you were ok moving the .dimmer before .experience you could just do the hover directly on the .dimmer element:
.dimmer:hover { opacity: 0 }
Otherwise you'd need to use a descendant selector:
.outerDiv:hover .dimmer { opacity: 0 }
i am looking for this kind of template . Moving the page to left and then page to right. Can anyone tell me how can i make this or is there any javascript example similar to this.
Create two <div>s, put them next to each other, make them take up the whole window, and change them as needed.
HTML:
<div class="left">left</div>
<div class="right">right</div>
CSS:
body {
margin: 0;
}
.left {
background-color: green;
bottom: 0;
left: 0;
position: fixed;
top: 0;
transition: width 1s;
width: 0;
}
.left.active {
width: 200px;
}
.right {
background-color: red;
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
transition: left 1s;
}
.right.active {
left: 200px;
}
JS (width jQuery):
$('.right').on('click', function() {
$('.left').toggleClass('active');
$('.right').toggleClass('active');
});
And here's a fiddle.
Using .toggle(effect,options,duration) method to moving the page to left to right.
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
var options = { direction: 'right' };
// Set the duration (default: 400 milliseconds)
var duration = 700;
$('#Id').toggle(effect, options, duration);
Taken via this link
If you want it to animate smooth on all devices you should use css transitions and transforms. Hiding and showing would be as basic as toggling a class then.
The example in jsfiddle
<style media="screen">
.wrapper {
width: 100%;
overflow: hidden;
}
.menu {
height: 100vh;
width: 100px;
background: #ABC;
color: white;
position: absolute;
left:0;
transition: transform 0.3s;
transform: translateX(-100px);
}
.content {
transition: transform 0.3s;
}
.active .menu {
transform: translateX(0);
}
.active .content {
transform: translateX(100px);
}
</style>
<button class="toggle">Toggle</button>
<div class="wrapper">
<div class="menu">
My menu
</div>
<div class="content">
My content
</div>
</div>
<script type="text/javascript">
document.querySelector('.toggle').addEventListener('click', function(event) {
event.preventDefault();
document.querySelector('.wrapper').classList.toggle("active");
});
</script>
NB! Supported from IE10. IE 9 will support without the animation and you probably should add the needed -ms-, -webkit-, -moz-, etc prefixes to support the older browsers if needed for transition and transform properties.
Also I advise not animating body or html with this method and put the content of page in the wrapper (in .content in the examples case). Moving body and html directly may lead to unpleasant surprises later.
I have the following script in my <head> tag which animates my div when the window is 150px from the bottom. I am not sure how to alter it so it animates when a certain distance from the top.
<script>
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()-150){
isShown = true;
$('.footer-btn').fadeIn(500);
}else{
$('.footer-btn').fadeOut(500);
}
});
</script>
Here's a jQuery script that I use in a site to set the animation from the top.
Change the value of offset() to control the fade-in activation position.
jQuery(document).ready(function($) {
// browser window scroll position (in pixels) where button will appear
// adjust this number to select when your button appears on scroll-down
var offset = 200,
// duration of the animation (in ms)
scroll_top_duration = 700,
// bind with the button link
$animation = $('.animation');
// display or hide the button
$(window).scroll(function() {
($(this).scrollTop() > offset) ? $animation.addClass('visible'):
$animation.removeClass('visible');
});
});
#container {
height: 800px;
}
#button {
border: 1px solid black;
padding: 10px;
width: 100px;
text-align: center;
background-color: chartreuse;
}
.animation {
position: fixed;
bottom: 25px;
right: 25px;
opacity: 0;
transition: opacity .3s 0s, visibility 0s .3s;
}
.visible {
visibility: visible; /* the button becomes visible */
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<p>SCROLL DOWN</p>
<a id="button" class="animation">BUTTON</a>
</div>
http://jsfiddle.net/zmz6g8kh/4/