Transform $.show() to css - javascript

I got this css:
#pop {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,0.8);
z-index: 10;
display: none;
}
Until now, in order to show this #pop div I used $("#pop").show(450);
How can I do it more "Cheaply" with css? I'd like to keep the same fade in effect $.show(ms) provides, not just display it.

well you can create animation and switch class on element something like:
$('#pop').addClass('show');
and you would need css something like this:
#pop {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,0.8);
z-index: 10;
display: block;
visibility: hidden;
opacity: 0;
}
#pop.show {
visibility: visible;
opacity: 1;
transition: 1.45s all;
}
As far as I know display property doesn't support transitions so you will need to do it with opacity. You could potentially put both classes on same element to simulate feel of element becoming visible on page load.
Here's update with fiddle, you need to use visibility property:
https://fiddle.jshell.net/6jwfz608/

you can use JS to toggle classes using "className" and use transition in the CSS
CSS
.pop_hidden {
transition:all 450ms;
position: absolute;
top: 0;
left: -101vw;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,0.8);
z-index: 10;
display: none;
}
.pop_shown {
transition:all 450ms;
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,0.8);
z-index: 10;
display: none;
}
(css edit) i got rid of display and changed it to moving the div from out of frame going right.
JS
document.getElementById('pop').className = 'pop_hidden';//to load the hidden div you can use id too
setTimeout(() => {
document.getElementById('pop').className = 'pop_shown';
}, 20);///adjustable delay if needed(ex: set to var in game loop)
Edit: my opinion on using CSS transition in combination with setting classNames. It's easy and fun to do. For a fading effect, toggle opacity. for and slide effect, toggle positions, there are tons of creative ways to change your elements. And since the naming of classes is completely arbitrary, you can have multiple classes to switch to. Also, i switched it to class out of habit(SORRY). But it should not matter, you can toggle id's the same way.

Here's an example showing onclick functionality and handled with Vanilla Javascript and no Jquery, since you wanted something less weighty.
document.getElementById('showBill').addEventListener('click', function () {
var bill = document.getElementById('bill');
if (bill.classList.contains('hide')) {
bill.classList.remove('hide');
} else {
bill.classList.add('hide');
}
});
img {
opacity: 1;
transition: opacity 3s ease-in-out;
-moz-transition: opacity 3s ease-in-out;
-webkit-transition: opacity 3s ease-in-out;
}
img.hide {
opacity: 0;
}
<button id='showBill'>Show Bill</button>
<br/>
<img src='http://fillmurray.com/300/300' class='hide' id='bill' />

Related

Smooth wrapper background-image transition, when using React onMouseEnter and onMouseLeave events on a childs

My page have a 4 sections on view port:
I need implement smooth background image transition when hovering on each section.
In my React-Next app, im using onMouseEnter/onMouseLeave events on childs, to handling
wrapper className changing, so image changing to. Full working code on codesandbox HERE
How can i achieve smooth transition when hovering on each child, of CSS do not have property background-opacity?
You can not change the background opacity, but there will be a workaround solution.
For example:
.has-background-element {
position: relative;
& > * {
position: relative;
z-index: 2;
}
&::before {
content: "";
background-image: url('');
opacity: 0;
transition: 0.5s opacity;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
&:hover {
&::before {
opacity: 0;
visibility: hidden;
}
}
}
In case you need to set the background image dynamically, should replace &:before by a specific element.

.show() not working properly (no animation, no further code)

I want a top banner to ease in as soon as the website is loaded. I use JQuery to do that task, but the show() function doesn't work as expected.
$(document).ready(function() {
$('#job').show(2000, function() {
$('#cross').click(function() {
$('#job').hide();
});
});
});
.job-banner {
position: fixed;
top: 0;
width: 100%;
z-index: 1;
background-color: #333;
display: none;
}
.job-banner:hover {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="job" class="job-banner">
<p>...</p>
</div>
But that just shows up the div instantly without any animation and the code that should execute after the animation doesn't work as well. I tried to put an alert inside the code block that should execute after the .show() but nothing.
Is there another way of achieving that or did I do something wrong?
#Sergej Thanks, that did the trick. I just needed to also declare opacity and now I have a css transition instead which is called by JQuery.
So for the CSS:
job-banner {
position: fixed;
top: 0;
width: 100%;
z-index: 1;
background-color: #333;
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
}
.visible {
visibility: visible;
opacity: 1;
}
And JS:
$(document).ready(function() {
$('#job').addClass('visible');
});

Hard transition of other properties when display property is involved

I want to fade between two differently sized elements within a container overlaying each other. The first element should be faded out, then the container resized and finally the other element faded in.
Here's the related snippet:
var layer1 = document.getElementById("layer1");
var layer2 = document.getElementById("layer2");
function switchLayers() {
layer1.addEventListener("transitionend", function() {
layer2.classList.add("fadein");
});
layer1.classList.add("fadeout");
}
#container {
position: relative;
background-color: yellow;
padding: 10px;
overflow: hidden;
}
.layer {
position: relative;
width: 400px;
}
#layer1 {
height: 100px;
float: left;
background-color: blue;
}
#layer2 {
height: 150px;
background-color: red;
display: none;
opacity: 0;
}
#layer1.fadeout {
opacity: 0;
transition: opacity 1s ease-out;
}
#layer2.fadein {
display: block;
opacity: 1;
transition: opacity 1s ease-out;
}
<button onclick="switchLayers()">Switch layers</button>
<div id="container">
<div id="layer1" class="layer"></div>
<div id="layer2" class="layer"></div>
</div>
When the second layer's display property is set to block it works as expected, i.e. the opacity is changed from 0 to 1 within a second. Though if it's set to none, the transition suddenly is discrete.
I've tried to set all within the transition value to transition all properties and also tried to include the display property in the transition like this:
transition: display 0s, opacity 1s ease-out;
Though without success. Note that because the container should resize to the size of the currently displayed layer, the visibility property can't be used (as it hides the element but still lets it occupy the space).
How to made this work?
Try using the visibility property instead of display.
For more information regarding the state changes in visibility and display, refer article.
For transitioning the parent height, you have to manually change the height property of the #container. Using display: block & display: none will never transition the parent.
Refer code:
var layer1 = document.getElementById("layer1");
var layer2 = document.getElementById("layer2");
function switchLayers() {
layer1.addEventListener("transitionend", function() {
layer2.classList.add("fadein");
document.getElementById("container").style.height = "170px";
});
layer1.classList.add("fadeout");
}
#container {
position: relative;
background-color: yellow;
padding: 10px;
height: 100px;
overflow: hidden;
transition: all 0.5s;
}
.layer {
position: relative;
width: 400px;
}
#layer1 {
height: 100px;
float: left;
background-color: blue;
}
#layer2 {
height: 150px;
background-color: red;
visibility: none;
opacity: 0;
}
#layer1.fadeout {
visibility: none;
opacity: 0;
transition: all 1s ease-out;
}
#layer2.fadein {
visibility: visible;
opacity: 1;
transition: all 1s ease-out;
}
<button onclick="switchLayers()">Switch layers</button>
<div id="container">
<div id="layer1" class="layer"></div>
<div id="layer2" class="layer"></div>
</div>
There is no straightforward way. Transitions do not work on display, nor do they work on auto height. So, visibility is a good bet.
Note that because the container should resize to the size of the
currently displayed layer, the visibility property can't be used (as
it hides the element but still lets it occupy the space).
Then, you will need to hack it out. You can make use of min-height. Give a faux min-height to your container, and then apply the height of your layer2 to it once the transition ends. Also, because display on layer2 will block the transition, you need to separate out the classes for display and opacity and space out their application using a zero timeout in between.
Here is a crude idea:
var layer1 = document.getElementById("layer1"),
layer2 = document.getElementById("layer2"),
container = document.getElementById("container"),
h = window.getComputedStyle(layer2).getPropertyValue("height");
container.addEventListener("transitionend", function(e) {
if (e.target.id === 'layer1') {
// apply layer2 height to container min-height
container.style.minHeight = h;
}
if (e.target.id === 'container') {
// First show the layer2
layer2.classList.add("show");
// Then a dummy pause to fadein
setTimeout(function(){
layer2.classList.add("fadein");
}, 0);
}
}, false);
function switchLayers() {
layer1.classList.add("fadeout");
}
#container {
position: relative;
background-color: yellow;
padding: 10px; overflow: hidden;
min-height: 1px; /* faux min-height */
transition: min-height 1s linear;
}
.layer { position: relative; width: 400px; }
#layer1 {
height: 100px; float: left;
background-color: blue;
transition: all 1s linear;
}
#layer2 {
height: 150px; background-color: red;
display: none; opacity: 0;
transition: opacity 1s linear;
}
#layer1.fadeout { opacity: 0; }
#layer2.show { display: block; } /* Separate out display */
#layer2.fadein { opacity: 1; } /* Separate out opacity */
<button onclick="switchLayers()">Switch layers</button>
<div id="container">
<div id="layer1" class="layer"></div>
<div id="layer2" class="layer"></div>
</div>

a tag showing image on hover with transition

I'm trying to display an image on the hover of an a tag which I have got complete and fully working, now I'm facing a problem...
I want the image to 'fade' in and out of the page when it is hovered rather than just appearing in order to give it a more satisfying finish.
My code at the minute is...
a.top-row:hover:after {
transition: .5s;
-webkit-transition: .5s;
-moz-transition: .5s;
display: block;
position: absolute;
z-index: 10;
top: -295px;
left: -30px; }
and to display the image I have seperate id's for each of the a tags so it's done like this..
a#a1:hover:after {
content: url(../images/cars/audi/a1.png); }
HTML -
<a class="top-row" id="a1">A1</a>
Like this? (background fixed, animating opacity)
a.top-row {
position: relative;
}
a.top-row:after {
transition: .5s;
-webkit-transition: .5s;
-moz-transition: .5s;
display: block;
position: absolute;
top: 100%;
left: 100%;
z-index: 10;
width: 70px;
height: 50px;
opacity: 0;
content: ' ';
pointer-events: none;
}
#a1:after {
background: url(https://placehold.it/70x50);
}
#r8:after {
background: url(https://placehold.it/70x50/ff00ff);
}
a.top-row:hover:after {
opacity: 1;
}
<a class="top-row" id="a1">A1</a><br/>
<a class="top-row" id="r8">R8</a>
Having images fade-in using only CSS would only make it complicated. Instead you can use the jQuery fadeIn() and fadeOut() method to achieve the same.
HTML
<div>
<a link="" id="showme">abcd</a>
<img src="image.jpg" height="200" width="300" alt="button" id="btn">
</div>
jQuery
$('#showme').hover(
function() {
$('#btn').fadeIn('slow');
},function() {
$('#btn').fadeOut('slow');
});
CSS
div {
width:305px;
height:229px;
}
#btn {
display:none;
}

How do I add a fade to a change image mouseover event?

This is my Javascript function so far :
function changeImg (){
document.getElementById('main').style.backgroundImage = "url('./img/map/maphv.png')"
}
function changeBack () {
document.getElementById('main').style.backgroundImage = "url('./img/map/map.png')"
}
This is in the HTML :
<div id="main">
<a data-title="Africa" href="collection/africa.html" onmouseover="mouseoversound.playclip();changeImg()" onmouseout="changeBack()"><img class="africa" src="./img/map/africa.png" height="50"/> </a>
This is the CSS :
#main {
background-image: url(../img/map/map.png);
background-size: 100%;
background-repeat: no-repeat;
width: 100%;
height: 580px;
position: relative;
}
#main img.africa {
top: 244px;
left: 397px;
height: 33.5%;
position: absolute;
width: 18%;
opacity:0;
}
#main img.africa:hover {
top: 244px;
left: 397px;
height: 33.5%;
position: absolute;
width: 18%;
opacity:1;
transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-webkit-transition: opacity .5s ease-in-out;
}
So the CSS is quite irrelevant but I posted it so that you can see how the top hover is fading in and out. I just wanted to add the fade to the onmouseover event to the background map main element.
So really I just need to add the fade in the Javascript function and add that function to the mouseover event handler?
Any ideas as Javascript is not my first language.. ;)
If you can use jquery,then you can do something like
FIDDLE DEMO
$("#main").on("mouseenter", function () {
$(".africa").stop(true, true).fadeOut(); /***fadeIn or fadeOut***/
});
Ditch the Javascript
If i understand your question correctly, you want to fade between images when you hover over an element, right? This can easily be done in pure CSS.
Give the element you want to animate a background image
Add a child element that's the same size as the parent. This can be an <img>, or a span or div with a background image
Set the opacity for the child element to 0, unless someone hovers over the parent element.
HTML
<div class="fading-bg">
<img src="foo/bar.jpg" alt="stuff">
</div>
CSS
.fading-bg{
position:relative;
width: 100px;
height: 100px;
background: no-repeat center;
background-size: cover;
}
.fading-bg img{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
-webkit-transition: opacity 500ms;
transition: opacity 500ms;
}
.fading-bg:hover img{
opacity: 1;
}
Javascript is awesome, but in my personal opinion you should avoid using it for simple animations like this, as CSS is more than capable of doing it on its own.

Categories