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.
Related
css
.image-darken {
transition: 1s;
filter: brightness (10%);
}
javascript
const portfolioItems = document.querySelectorAll('.portfolio-item-wrapper');
portfolioItems.forEach(portfolioItem => {
portfolioItem.addEventListener('mouseover', () => {
console.log(portfolioItem.childNodes[1].classList);
portfolioItem.childNodes[1].classList.add('image-darken');
});
});
HTML
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background"
style="background-image:url(images/portfolio1.jpg"></div>
<div class="img-text-wrapper">
<div class="logo-wrapper">
<img src="images/quip.png">
</div>
<div class="subtitle">
I built the Quip Ecommerce platform, named a Top 25 Invention by Time
Magazine in 2016.
</div>
</div>
</div>
I want to use javascript to make it so that when I put my cursor over the image, it darkens in one second. And when my cursor leaves, it lightens in one second. I have many portfolio-item-wrapper elements. I want to use javascript because I want this to be my introduction to javascript. I am following a tutorial on youtube.
This is the tutorial video. The part with javascript comes in at about 1:14:00.
This is what the website looks like so far:
Please help me and dumb it down for me, i just started learning to code.
Thanks!
What you're aiming for is typically achieved without any JavaScript, by using the :hover CSS pseudo-class. Taking a non-JavaScript "pure CSS" approach generally allows for simpler solution that is more maintainable in the long run.
In your case, a pure CSS approach is possible by removing your JavaScript and by applying the following changes to your CSS:
/*
Not needed
.image-darken {
transition: 1s;
filter: brightness (10%);
}
*/
.portfolio-item-wrapper {
/* Add transition rule to filter property of the item wrapper */
transition: filter 1s;
}
/* Add styling that applies when the user "hovers" the element. The
"hover" will cause the filtering to be applied to this element */
.portfolio-item-wrapper:hover {
filter: brightness(10%);
}
/* Added for snippet - not needed in your code */
.portfolio-img-background {
min-height:5rem;
}
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background"
style="background-image:url(https://via.placeholder.com/150)"></div>
<div class="img-text-wrapper">
<div class="subtitle">
I built the Quip Ecommerce platform, named a Top 25 Invention by Time
Magazine in 2016.
</div>
</div>
</div>
If you really want to take a scripted approach to this, then you could do the following:
document.querySelectorAll('.portfolio-item-wrapper')
.forEach(item => {
/* Get background element of this item */
const background = item.querySelector('.portfolio-img-background')
/* Add image-darken class to background element on hover event */
item.addEventListener('mouseover', () => {
background.classList.add('image-darken');
});
/* Add image-darken class to background element on hover end */
item.addEventListener('mouseout', () => {
background.classList.remove('image-darken');
});
});
/* Apply transition to the background element of portfolio item */
.portfolio-item-wrapper .portfolio-img-background {
transition: filter 1s;
}
/* Define image darkening */
.image-darken {
filter: brightness(10%);
}
/* Added for snippet - not needed in your code */
.portfolio-img-background {
min-height:5rem;
}
<div class="portfolio-item-wrapper">
<div class="portfolio-img-background"
style="background-image:url(https://via.placeholder.com/150)"></div>
<div class="img-text-wrapper">
<div class="subtitle">
I built the Quip Ecommerce platform, named a Top 25 Invention by Time
Magazine in 2016.
</div>
</div>
</div>
Hope that helps!
Another way would be to overlay the image with a grey overlay that shall enable you to have dark effect on the image in the background.
.layer {
background-color: rgba(248, 247, 216, 0.7);
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.card-title {
position: absolute;
top: 36%;
font-size: 2.0em;
width: 100%;
font-weight: bold;
color: #fff;
}
.card {
position: relative;
text-align: center;
}
HTMl Patch
<div class="card" id="card">
<img src="{{Path_to_featured_image}}"/>
<div class="card-title" id="card-title">{{Heading_or_slug}}</div>
</div>
JS
$( "#card-title" ).hover(
function() {
$( this ).addClass( "layer" );
}, function() {
$( this ).removeClass( "layer" );
}
);
you can also set unset the classes on realtime using Javascript if you want to control it dynamically using various parameters like id, class or even tag to select the effected element.
I advise you use JavaScript addEventListener 'hover', function(){getEl......ById....style.opacity=0.5}
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.
When a user updates a record in the database, I'll modify the record using an AJAX request. Then, I add to the rendered div a class by calling the addClass method. The class I add (let's call the class colored) to the div contains only a background color directive (to highlight the current modified record).
So far so good.
Now I want to remove this class with a fadeOut effect, after 1 second.
I've tried these approaches, but in both cases it's not only removing the class but the whole div.
$("#id1").fadeOut(1000, function() {
$(this).removeClass('colored');
});
or
$("#id1").delay(1000).fadeOut().removeClass('updated_item');
Why is the div removed instead of the class ? Actually, the div is getting a display: none; style - I see this in the console.
fadeOut will fade the entire element out and hide it from the screen. If you want to fade the effects of the class, you can use jQuery UI .removeClass() (which accepts a time duration and fade effect, unlike regular jQuery) or CSS3 transitions.
You can use setTimeout function like this:
setTimeout(
function(){
$("#id1").removeClass('updated_item');
}
,1000 //1 second
)
And if you want to change the color with animation you can just add a transition style in your CSS like this:
.myDiv{
background:red;
transition:background 1s;
-webkit-transition:background 1s;
}
.colored
{
background:blue;
}
I dont know if I got it, is this what you want ?
Fiddle
jQuery('.action').click(function() {
jQuery(this).parent().addClass('highlight');
if ( confirm('Are you sure?') ) {
jQuery(this).parent().fadeOut(1000, function() {
jQuery(this).addClass('remove').removeClass('highlight');
});
} else {
jQuery(this).parent().removeClass('highlight');
}
});
.highlight {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
#1 Click me
</div>
<div>
#2 Click me
</div>
You're applying the fadeOut function to the div itself, not on the class:
//the div, will fadeout after 1000 ms and get the class removed
$("#id1").delay(1000).fadeOut().removeClass('updated_item');
If you want to remove the background-color with a fading effect, you'd have to use something like:
setTimeout(function() {
$('#id1').removeClass('updated_item');
}, 1000)
On the css side, use a transition for the fadeOut effect:
#id1 {
transition: background-color 0.5s ease;
}
.updated_item {
background-color: yellow;
}
Fiddle
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'?
I want a div to be faded to opacity 1 when mouse enters, and to 0.5 when it leaves. This is my code:
<script>
$(document).ready(function(){
$("#header").mouseenter(function(){
$("#header").fadeTo('fast', 1);
});
$("#header").mouseleave(function(){
$("#header").fadeTo('fast', 0.5);
});
}
</script>
HTML:
<body>
<div id="header">
<h1>Hello!</h1>
<p>blah blah...</p>
</div>
</body>
I have a div in the body containing one h1 and one p. Nothing happens when I move the mouse over it. Is something wrong?
Your wrong indentation hides a syntax error :
$(document).ready(function(){
$("#header").mouseenter(function(){
$("#header").fadeTo('fast', 1);
});
$("#header").mouseleave(function(){
$("#header").fadeTo('fast', 0.5);
});
}); // <= missing parenthesis
Other than that, it works. Be careful that 0.5 isn't really transparent for all color combinations.
How about css?
#header {
opacity: .5;
transition: opacity .3s ease-in-out;
}
#header:hover {
opacity: 1;
}
Just make sure to add all the css vendor prefixes. This is better than using jQuery IMO. If browser doesn't support transition or opacity it's no big deal, that's what "graceful degradation" is all about.