I have an Opacity transition affecting a div element but it does not seem to change the opacity of the child elements inside the div. My understanding is that the property of the containing div should apply to all child elements as well.
Any help would be greatly appreciated. Below is the HTML and CSS:
.tabtext {
opacity: 0;
transition: opacity 1s;
}
<div id="smartITtext" class="tabtext">
<h2 class="tabtext">Some Text</h2>
</div>
Below is the line in Javascript which changes the Opacity:
document.getElementById(smartITtext).style.opacity= 1;
When applying your javascript code it will add the opacity style on the element in your html. So it doesn't overwrite the css style.
Here is an example on how you could let it work.
document.getElementById("btn").addEventListener("click",function(){
var div = document.getElementById("smartITtext");
div.style.opacity = 0.5;
});
.tabtext {
transition: opacity 1s;
}
<div id="smartITtext" class="tabtext">
<h2 class="tabtext">Some Text</h2>
</div>
<input type="button" id="btn" value="change opacity" />
Your child element has a specific opacity set on it. Therefore, it won't inherit any changes you make to the parent and your transition won't run: you've told it to have opacity: 0;, so that's what it will have despite whatever you set the parent element's opacity to.
That's equivalent to setting the color of a child element to be blue and setting its parent's color to red: that child element will still have blue text as you've explicitly told it to.
You will need to change that specific element's opacity to run your transition. Judging by your code, something like:
document.getElementById(text).firstElementChild.style.opacity = 1;
or
document.querySelector('#' + text + ' .tabText').style.opacity = 1;
would do the trick for you.
Firstly your javascript refences an id that does not match your html.
Secondly the id reference ("text") needs to be in quotes.
Here is an alternative way to get the desired result.
document.getElementById("smartITtext").className += " Active";
.tabtext {
opacity: 0;
transition: opacity 1s;
}
.tabtext.Active{
opacity:1;
}
<div id="smartITtext" class="tabtext">
<h2 class="tabtext">Some Text</h2>
</div>
The property of the parent element should apply to the child element. UNLESS the child element has it's own property.
So if we have this code:
#container {
color: blue;
}
.one {
color: firebrick;
}
<div id="container">
<span class="one">hello </span>
<span class="two">World</span>
<span>. <-- hello should be red, while world and this text should be blue</span>
</div>
play in jsbin: https://jsbin.com/focimuk/edit?html,css,output
So for a solution, try setting just opacity on the parent element, and add a transition to it.
Related
I am currently learning on my own some CSS & JS and i'm stuck on a part i really want to work on but have trouble finding the right answers online as there seem to be a tons of methods yet i couldn't make any of them work.
Here is a snippet of what i have in mind :
let htmlcontent = `<p>It's me again!</p>`;
function animation() {
let content = document.getElementById("content");
content.innerHTML = "";
content.innerHTML = htmlcontent;
}
#content p {
font-size: 100px;
}
<div id="content">
<p>
Hello world!
</p>
</div>
<button onclick="animation()">
Click here
</button>
The idea is that when i click on the button, old content gets replaced by new HTML content and i want that new content to fade in from the right (a transition) every time i click the button.
I'm sorry if my question is bad/weird, english isn't my primary language and i have no one else to ask at the moment. Thank you for your patience.
You could just make a CSS animation and play that whenever you click the button.
let htmlcontent = `<p>It's me again!</p>`;
let content = document.getElementById("content");
function animation() {
content.innerHTML = htmlcontent;
content.classList.add("animate");
setTimeout(function() {
content.classList.remove("animate");
}, 500); // 500 is the same time as the CSS animation
}
#content p {
font-size: 100px;
}
.animate {
animation: fadeIn 500ms ease-out backwards;
}
#keyframes fadeIn {
from {
transform: translateX(250px);
opacity: 0;
}
to {
transform: translateX(0px);
opacity: 1;
}
}
<div id="content">
<p>
Hello world!
</p>
</div>
<button onclick="animation()">
Click here
</button>
To trigger a CSS transition, change the CSS state after you inserted the HTML. You can do this by changing a class (on the container or an inserted element).
Also see here:
Is it possible to animate a change to innerHTML using CSS only?
When something happens I am setting body background-color to grey and decrease opacity. However that obviously changes opacity of a button as well.
What I want to achieve is when action occur, change opacity of everything except the button.
var highlight = $('#' + scroll).closest('div').find('button');
$('body').css('opacity', '0.2');
$('body').css('background-color', 'grey');
$(highlight).css('background-color', '#FDFF47');
$(highlight).css('opacity', '1');
How can that be done?
In background-color use rgba() to reduce opacity only to background. opacity property is not needed.
$('body').css('background-color', 'rgba(128, 128, 128, 0.5)');
About rgba(R, G, B, A) - https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgb()_and_rgba()
When you are trying to set background with opacity use rgba which stands for Red,Blue, Green colors with Opacity(Alpha) where you can pass the last parameter as opacity. use background: rgba(0,0,0,0.2) instead of setting background-color: grey. Check below snippet for reference.
div {
background-color: rgba(0, 0, 0, 0.2);
padding:50px;
}
p {
color: blue;
}
<div>
<p>My Text</p>
</div>
Rather than setting the opacity, you can set the background color with an alpha value:
$('body').css('background-color', 'rgba(192,192,192,0.2)');
try with this jquery code
$(document).ready(function() {
$("#btn").hover(function() {
$("#btn").css('background-color', 'grey');
$("#btn").css('opacity', '0.5');
});
});
#btn {
border: none;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">test</button>
As you write in comments to your question, if you're looking for listen to url changes, I suggest you to have a look to this question.
Instead, if you're looking for execute code when that div is on top of HTML page try something like this:
$(document).on('scroll', function(){
if($('your_div').offset() == 0){
//do stuff when your_div is on top of the page
}
})
This code listen to page scroll, and when your div have an offset of 0px from the top of the page it executes the code in if statement
EDIT
If you do this $(body).css('opacity', '0.2') you're setting opacity for all in body (specifically for all <body>'s children). To set opacity only for some elements, you have to do something tricky: you have to wrap those elements with a div with the same class for all and then set opacity for that class.
I.e.: assuming you wrap that element with a div which class is opacity, if you do $('.opacity').css('opacity', '0.2') only elements in those div will have opacity setted to 0.2.
I have a div with some content in it, and I am showing a button with jQuery. I want to fade it in thus I used:
setTimeout(function() {
jQuery('#button').css('opacity', 1);
}, 100);
First, on html, I have set the button's html to display:none; opacity: 0 I have achieved showing/hiding button, however when it shows, it's making the div stretch instantly. Instead, I want the parent div to expand with transition.
I have created a Fiddle: https://jsfiddle.net/atg5m6ym/7450/ . In this example, when I press the trigger button, I want the button to fade in as well as applying transition on the parent div.
For optimal performance, when using transitions and animations in CSS, you should stick to opacity and transform instead of display: none; and width/height.
Will quote the comment I stated above:
The way you designed this is not ideal, you should not be using
display: none; in transitions or animations. This will cause redrawing
in your browser, and you cannot transition properties with binary
settings, display just switches between states (ex: none/block), not
between values like opacity does.
What you could do is separate your content, sharing the same background color to simulate it is the same container.
Then use transform and the scale() function.
Code Snippet:
jQuery('#trigger').click(function() {
jQuery('.bottom-content').addClass('open');
})
.top-content,
.bottom-content {
background-color: lightblue;
}
.bottom-content {
transform: scaleY(0);
transition: transform 250ms ease-in;
transform-origin: top;
}
.bottom-content.open {
transform: scaleY(1);
}
.bottom-content.open #otherButton {
opacity: 1;
}
#otherButton {
margin-top: 20px;
opacity: 0;
transition: opacity 10s;
transition-delay: 250ms;
/* Separated for clarity purposes, wait for parent transition to end before starting this one*/
}
<script src="https://www.addressfinder.co.nz/assets/v2/widget.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="content">
<section class="top-content">
<button id="trigger">
Trigger
</button>
<br />Lalala La
<br />Lalala La
<br />Lalala La
<br />
</section>
<section class="bottom-content">
<button id="otherButton">
Test Btn
</button>
</section>
</div>
</div>
The accepted answer is overkill. Just use .fadeIn() and forget the opacity and transition settings completely. If you want to have the div expand separate from the button, just apply the effect to the div and then trigger the button effect at the end of the div effect. This snippet does the same thing as the accepted answer without any of the CSS troubles:
$(function(){
jQuery('#otherButton').hide();
jQuery('#two').hide();
});
$('#trigger').click(function() {
$('#two').slideDown(2000, function(){
$('#otherButton').fadeIn();
});
})
#container, #two {
background-color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="container">
<div id="content">
<button id="trigger">Trigger</button>
<br>
Lalala La<br>
Lalala La<br>
Lalala La<br>
<div id="two">
<button id="otherButton">Test Btn</button>
</div>
</div>
</div>
You can combine the jquery:
jQuery('#trigger').click(function() {
jQuery('#otherButton').slideDown(300).css('opacity', 1);
})
Note that I used the slideDown() function rather than show(). Using a transition function allows you to set an execution time. show() simply toggles the css display property, but you can not transition the display property.
Updated Fiddle
Instead of adding CSS with jQuery, you can simply add a class instead.
Set this class to whatever properties you want on it, us as:
.is-visible {
opacity: 1;
}
Example Fiddle: https://jsfiddle.net/atg5m6ym/7456/
Now, CSS doesn't like to transition when switching display: none; so instead I have simply set the height: 0; and only applied necessary styling on the .is-visible class.
I have a this script :
function ani(){
document.getElementById('para').className ='exeInputapparition';
}
To apply a css animation on my element who has the ID para.
It's working but i wanted to know if it's possible to apply to all element who have the class para instead of the ID because i have more than one element where i need to apply my CSS animation.
Thanks in Advance for your help :)
The Css :
#keyframes inputapparition {
0%
{
opacity: 0;
}
100%
{
opacity: 1;
}
}
.exeInputapparition
{
animation-name: inputapparition;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
#para
{
margin: 0;
font-family: "Roboto"
font-size: 20px;
opacity: 0;
}
The function querySelectorAll returns all elements, it's a "DOM array", therefore there isn't the attribute className. You should loop the list and change one by one:
var allElementsPara = document.querySelectorAll(".para");
for (var i = allElementsPara.length - 1; i >= 0; i--) {
allElementsPara.item(i).classList.add("exeInputapparition");
};
You can use document.querySelectorAll
var x=document.querySelectorAll(".para");
for(var a =0;a<x.length;a++){
x[a].classList.add("exeInputapparition")
}
JSFIDDLE
JSFIDDLE WITH .para
The id is unique. You must use a same class for all element that you want to animate. For all element, put the class animate and edit the function
function ani(){
document.getElementsByClassName('animate').className ='exeInputapparition';
}
A more performing solution would be to apply the class to the body element.
Every access to the DOM takes some ms and when your web page becomes huge, with a lot of JavaScript, it can get slow.
Accessing a single DOM element (<body>) instead N elements with the given class will:
reduce the number of accesses to the DOM;
reduce to 0 the queries you perform on the DOM;
make sure all the elements starts appearing at the same time;
assure that every element with the class para added after the script has run, will have the correct style;
// here I use a `setTimeout` to make the function start automatically
// logically you can take the content of this function and put it
// wherever you prefer
setTimeout(function() {
document.body.className += ' in';
}, 1000);
.para {
opacity: 0;
transition: opacity 0.5s linear;
}
.in .para {
opacity: 1;
}
<div class="para">para 1</div>
<div class="para">para 2</div>
<div class="para">para 3</div>
You can disregard the previous answers, people did and could not know what exactly you want before you posted the css.
You do not the keyframes for this.
Here is a full JS solution, as you need JS for this anyway.
document.querySelector(".reveal3").addEventListener("click", function(){
toggle();
});
function toggle(){
var c = document.querySelector(".reveal3");
if(c.style.opacity == 1){
c.style.opacity = 0;
} else {
c.style.right = "0px";
c.style.opacity = 1;
}
}
See it in action here, the div on the right side, click on it to toggle visibility.
http://codepen.io/damianocel/pen/GopoJB
this solution will help your.it is easy to use jquery with this.I have implemented for a div.you can use it for image also.so try this
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div class="clickme" style="background-color:orange;width:100px;height:100px;">
<!--use <img src="imageurl"/> here-->
</div>
<!-- js-->
<script type="text/javascript">
$(document).ready(function(){
$(".clickme").click(function(){
$(this).animate({opacity:0.5},1000);
});
});
</script>
</body>
</html>
I have a div containing two spans which hold text:
<div class="jumbotron">
<span id="span-one" class="name-letters">One</span>
<span id="span-two" class="name-letters">Two</span>
</div>
I perform a CSS animation on these spans to move one element away from the other (took out browser prefixes for better legibility) JSFiddle:
#span-two {
animation-delay: 3s;
animation-duration: 3s;
animation-name: slide;
animation-fill-mode: forwards;
}
#keyframes slide {
from {
margin-left: 0%;
}
to {
margin-left: 25%;
}
}
Example:
start:
One Two
stop:
One Two
Now, I would like to add a third span, once the animation has completed, next to the first span. However, I would like the second span to keep its animation end position.
Example:
what I want:
One Three Two
what I get: JSFiddle
One Three Two
This is because I add to the margin-left attribute of the second span for it to move in the animation. So, when I add a new element before it, the second span moves further to meet the margin-left value that was set. My Question: How can I achieve this without moving the second spans position after the third span is added?
You can set span #3 positioned absolutely (or fixed), but without specifying top and left values (!):
#span-three {
position: absolute;
}
and
span.id = "span-three";
Demo: http://jsfiddle.net/gcgtveo5/2/
I can't write pure javascript, but could you do something like this instead of the absolute positioned span?
HTML:
<div>
<div class="container">
<span id="span-one" class="name-letters">One</span>
</div>
<div class="container" id="spanThreeContainer">
</div>
<div class="container">
<span id="span-two" class="name-letters">Two</span>
</div>
CSS:
.container {width:33.33%; float:left;}
and then append your new span to '#spanThreeContainer'?