I have a div that is positioned absolute to my header-Tag. All is okay. With JavaScript I toggle the classes display_block and display_none, when I click on my button.
All works fine.
The div that gets display: none and display: block with the toggle, gets the position right: -100% when it's display:none, and right: 0 when its display: block.
Also works fine. But there is one problem.
The div got transition: all 1s ease-in-out but I don't get that flow-motion. It's only here or gone. But no effect. Why?
header {
position: relative;
}
#ware_cart {
position: absolute;
top: 80px;
width: 35%;
transition: all 1s ease-in-out;
}
.display_none {
display: none;
right: -100%;
}
.display_block {
display: block;
right: 0;
}
<header>
<div id="ware_cart" class="display_none">
<!-- stuff i like to show -->
</div>
</header>
As Paulie D said, you can not transition display.
Also, if the element starts at right: 100% there is no need to hide it.
Try this snippet:
$('#toggle').click( function() {
$('#ware_cart').toggleClass('move_right');
});
header {
position: relative;
}
#ware_cart {
position: absolute;
width: 35%;
top: 80px;
right: 100%;
transition: right 1s ease-in-out;
}
#ware_cart.move_right {
right: 0%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div id="ware_cart">
stuff i like to show
</div>
<div id="toggle">
Toggle it!
</div>
</header>
Related
I created a button where you can click it. It then initiates a CSS animation where some buttons and text flow down the screen saying are you sure you want to do this? They can then click the yes or no button and I want it to reverse the animation back up. I have completed the animation going down but I can't manage to repeat that animation going back up when they click a button.
Here is the HTML:
<button onclick="confirm()">Delete</button>
<div id="wholeshow" class="confirm-whole">
<h1 class="confirm">Delete</h1>
<p class="confirm">Are you sure you want to delete ____?</p>
<button class="confirm" onclick="reset()">Delete</button>
<button class="confirm" onclick="cancel()">Cancel</button>
</div>
Here is the JS:
function confirm() {
document.getElementById("wholeshow").classList.add("add");
}
and here is the CSS:
.confirm-whole {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: grey;
animation: slideIn 0.5s forwards;
}
#keyframes slideIn {
0% {
top: -250px;
height: 0%;
}
99% {
height: 0%;
}
100% {
top: 0px;
height: 100%;
}
}
.add {
display: block;
}
Thanks so much for the help!
The JavaScript isn't pretty but it works, perhaps a better solution would be to use CSS transitions if they are able to support your animation requirements.
function confirm() {
document.getElementById("wholeshow").classList.add("add");
}
// added
function reset() {
const wholeshow = document.getElementById("wholeshow");
const resetDir = () => { // need to reset the animation direction and remove the `add` class
wholeshow.removeEventListener("animationend", resetDir, true);
wholeshow.style.animationDirection = "normal";
wholeshow.classList.remove("add");
};
wholeshow.addEventListener("animationend", resetDir, true);
wholeshow.style.animationDirection = "reverse";
wholeshow.classList.remove("add");
void wholeshow.offsetWidth; // force rerender
wholeshow.classList.add("add");
}
.confirm-whole {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: grey;
animation: slideIn 0.5s;
}
#keyframes slideIn {
0% {
top: -250px;
height: 0%;
}
99% {
height: 0%;
}
100% {
top: 0px;
height: 100%;
}
}
.add {
display: block;
}
<button onclick="confirm()">Delete</button>
<div id="wholeshow" class="confirm-whole">
<h1 class="confirm">Delete</h1>
<p class="confirm">Are you sure you want to delete ____?</p>
<button class="confirm" onclick="reset()">Delete</button>
<button class="confirm" onclick="cancel()">Cancel</button>
</div>
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');
});
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' />
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;
}
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.