I want to have my javascript element.style.visibility = 'visible'; and I need it to fade using the CSS transition I have. It doesn't currently fade it is just a snap transition.
NB: I need to use JS not jQuery.
JS:
function removeOverlay () {
var a = document.getElementById('overlay');
a.style.visibility = 'hidden';
}
}
// In another function
document.getElementById('overlay').style.visibility = 'visible';
HTML:
<div id='overlay' onclick='removeOverlay()'>
<span>Please enter a number e.g. 7.50</span>
</div>
CSS:
#overlay {
visibility: hidden;
background-color: rgba(0,0,0,.85);
top: 0; bottom: 0; left: 0; right: 0;
z-index: 9999;
position: absolute;
-webkit-transition: visibility 0.5s ease;
transition: visibilty 0.5s ease;
}
#overlay:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
#overlay span {
color: white;
text-align: center;
vertical-align: middle;
display: inline-block;
position: relative;
}
Thanks :)
I don't believe visibility can be animated as it only takes 2 values. You should use opacity.
If your problem is just fading, and css transform is not extremely necessary, maybe you would be better off using a javascript approach. You could apply the fade effect using "setTimeout" and the ".style.opacity"
property of the DOM element. The method could work like this:
function FadeIn(id, opacity) {
var element = document.getElementById(id);
if(opacity == null)
opacity = 0;
SetOpacity(element, opacity);
if(opacity < 100)
{
setTimeout(function() {
FadeIn(id, opacity+10);
}, 100);
}
}
function FadeOut(id, opacity) {
var element = document.getElementById(id);
if(opacity == null)
opacity = 100;
SetOpacity(element, opacity);
if(opacity > 0)
{
setTimeout(function() {
FadeOut(id, opacity-10);
}, 100);
}
}
function SetOpacity(element, value) {
element.style.opacity = value / 100;
element.style.filter = "alpha(opacity=" + value + ")";
}
//Then call it like this:
FadeOut("div_id");
Yes, css transitions are actually lighter than js built ones. But for better control over timing and to apply the effect over many objects as you want, js can be very handy.
You can solve this by adding or removing a class from the object, and then having two sets of CSS transitions - one for the transition in and one for the transition out. They will have both opacity and visibility properties but different delay values, and potentially could have different durations and easing methods too.
Here is some example CSS. I've included only the CSS relevant for the transition, not any descriptive properties about the object itself.
/* fade out */
#hiddenobject {
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 200ms ease 0s, visibility 0s linear 200ms;
-moz-transition: opacity 200ms ease 0s, visibility 0s linear 200ms;
-ms-transition: opacity 200ms ease 0s, visibility 0s linear 200ms;
-o-transition: opacity 200ms ease 0s, visibility 0s linear 200ms;
transition: opacity 200ms ease 0s, visibility 0s linear 200ms;
}
/* fade in */
#hiddenobject.showobject {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 500ms ease-in 0s, visibility 0s linear 0s;
-moz-transition: opacity 500ms ease-in 0s, visibility 0s linear 0s;
-ms-transition: opacity 500ms ease-in 0s, visibility 0s linear 0s;
-o-transition: opacity 500ms ease-in 0s, visibility 0s linear 0s;
transition: opacity 500ms ease-in 0s, visibility 0s linear 0s;
}
In this case we have an object with an ID of 'hiddenobject' which is hidden from view. It has both an opacity of zero and the visibility attribute is hidden. We will add a class of 'showobject' to it, which will cause the item to be displayed, with an opacity of 1 and visibility of visible.
Visibility can only have two states really, it's either visible or it's not - there is no grey area in-between. So to show a fade we need to use the opacity property. The difficulty with opacity is that something with an opacity of 0 will still be present on screen - it can be clicked on, interacted with etc. which may not be desirable. The solution is to use both properties together.
When we add the 'showobject' class we transition the opacity from it's current value of 0 to it's new value of 1 with a duration of 500ms, or half a second. The delay attribute of that transition is set to 0 seconds, so it happens immediately. The visibility of that object was hidden, so in order to witness this fade in we need to immediately transition the visibility property to it's new state of visible. This transition has both a duration and delay of 0s, so it happens instantly - I've put linear easing as there is no need for any easing really, so may as well keep it simple - that's personal preference. So now our object is visible the moment we add the class and we see it fade in.
When we remove the class we want the fade to happen a bit quicker, so our default transition for the object has an opacity duration of 200ms, a fifth of a second. If we changed the visibility to hidden straightaway however we wouldn't see the fade at all, it would just disappear. So we have to delay the transition by a value equal to the length of the fade - in this case 200ms. Now our object completes it's fade to 0 opacity before changing it's visibility to hidden.
The visibility transition on the showobject class is pretty much what would happen with that property by default - an instant change - but we need to define it there to overwrite the delayed transition we've set on the element default.
Related
I'm creating a menu that appears after a click on the hamburger button, (upper right corner) and I'm trying to use the jQuery function to slide it in rather than just having it appear.
The issue I'm having is that it only seems to activate the sliding bit on the second attempt.
I've seen a bunch of other questions about this but the answers are either "you've got a specific error in your code" or "you have to toggle or otherwise fake the animation on page load". I'm hoping my code is error-free and I'm not really keen to use a toggle hack just to bypass the first animation no-show.
Presumably, this is supposed to work the first time & every subsequent time.
$('.navTrigger').click(function () {
$(this).toggleClass('active');
$("#mainListDiv").toggleClass("show_list").fadeIn(0);
$('li').toggleClass('logo2314441-mobile');
$('li').toggleClass('li-mobile');
});
UPDATE:
I also tested with this other snippet, but still not working, unfortunately...
$('.navTrigger').click(function () {
$(this).toggleClass('active');
$("#mainListDiv").fadeIn(0, function(){
$("#mainListDiv").toggleClass("show_list");
});
$('li').toggleClass('logo2314441-mobile li-mobile');
});
.nav div.main_list ul {
width: 100%;
padding: 0;
display: flex;
list-style: none;
align-items: center;
justify-content: space-between;
flex: 1;
-webkit-transition: opacity .4s ease .1s,-webkit-transform 1s cubic-bezier(.23,1,.32,1);
transition: opacity .4s ease .1s,-webkit-transform 1s cubic-bezier(.23,1,.32,1);
transition: opacity .4s ease .1s,transform 1s cubic-bezier(.23,1,.32,1);
transition: opacity .4s ease .1s,transform 1s cubic-bezier(.23,1,.32,1),-webkit-transform 1s cubic-bezier(.23,1,.32,1);
transform: translateY(-140px);
}
.nav div.show_list ul {
overflow: hidden;
display: block;
-webkit-transition: opacity .4s ease .1s,-webkit-transform 1s cubic-bezier(.23,1,.32,1);
transition: opacity .4s ease .1s,-webkit-transform 1s cubic-bezier(.23,1,.32,1);
transition: opacity .4s ease .1s,transform 1s cubic-bezier(.23,1,.32,1);
transition: opacity .4s ease .1s,transform 1s cubic-bezier(.23,1,.32,1),-webkit-transform 1s cubic-bezier(.23,1,.32,1);
transform: translateY(0px);
}
my question is: How do I get the animation to work first time without an onload fix/hack? Thanks in advance.
Test with this:
$('.navTrigger').click(function () {
$(this).toggleClass('active');
$("#mainListDiv").fadeIn(0, function(){
$("#mainListDiv").toggleClass("show_list");
});
$('li').toggleClass('logo2314441-mobile li-mobile');
});
The callback will be triggered as soon as the Fade In is complete. Now the list will be visible and then the class is added, so the animation should start.
I am working on a new site that is using page transitions. The old content fades away and the new content fades in - at least that's what should happen.
When the new content is loaded, I use JS to set it's opacity: 0
this.newContainer.style.opacity = 0;
Then, I add a new class so I can use CSS transitions
this.newContainer.classList.add("animate-in");
This is the CSS for the .animate-in
.wrapper.animate-in {
opacity: 1;
visibility: visible;
-webkit-transition: all 1000ms ease-in-out;
-moz-transition: all 1000ms ease-in-out;
-ms-transition: all 1000ms ease-in-out;
-o-transition: all 1000ms ease-in-out;
transition: all 1000ms ease-in-out;
}
However, this doesn't work. The code doesn't animate the opacity from 0 to 1. Instead, it is animating backwards, from 1 to 0. It seems like the classList.add doesn't hear the previous line of code.
Anyone know how to fix this?
EDIT
OK, so I learned that using the JS style.opacity will completely override any opacity CSS rules. This is my problem. How do I get around this?
Try to use css animation and remove code--> this.newContainer.style.opacity = 0;
.wrapper.animate-in {
opacity: 1;
transition: all 1000ms ease-in-out;
animation: animate-in01 1s;
animation-iteration-count: 1;
}
#keyframes animate-in01{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
I have a div element with background image, I'm trying to fade in and out background images with Jquery.
By now the function works well but it fades out the whole div and not only the background as I wish.
function rentPics()
{
$('#d2').css('background-image','url(' + mazdaArr[1] + ')');
interID=setInterval (changeImage,3000);
}
function changeImage()
{
$('#d2').animate({opacity: 0}, 1500, function(){
$('#d2').css('background-image', 'url(' + mazdaArr[x] + ')');
}).animate({opacity: 1}, 1500);
x++;
if (x==mazdaArr.length)
{
x=1;
}
}
If you're looking for a simple and lightweight cross-fading, use the CSS transition. This won't affect the text inside the element, the border and the box-shadow.
transition: background-image 1s ease-in-out;
-webkit-transition: background-image 1s ease-in-out;
-moz-transition: background-image 1s ease-in-out;
-ms-transition: background-image 1s ease-in-out;
-o-transition: background-image 1s ease-in-out;
Check out this fiddle.
It's supported by Chrome, Safari and Opera but I'm not quite sure with Firefox and IE
If you have a larger list of images to loop. You may also want to consider caching the images URL first because I noticed some flickering/blinking on first use. Check solutions here - Preloading CSS Background Images
The fade in applies opacity to the entire div with the background image incluide, you can do this creating a layer behind the div that you want apply the fade in and fade out.
Instead of using jQuery to animate opacity, you could have it add or remove a class. Then add transitions to your CSS, which should produce your desired result. Something like below might work. You can see the documentation of CSS transitions here. The only drawback is IE, per usual.
.element {
-webkit-transition: ease 0.2 all;
-moz-transition: ease 0.2 all;
-o-transition: ease 0.2 all;
-ms-transition: ease 0.2 all;
transition: ease 0.2 all;
}
Use a relative container with an absolute positioned overlay. Your HTML should look like this:
<div id="d2" class="image-wrapper">
<img src="/img/1.jpg" />
<div class="overlay"> your text goes here </div>
</div>
... and your CSS:
.image-wrapper {
position: relative;
}
.image-wrapper .overlay {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: auto;
}
.image-wrapper img {
display: block;
}
Now you can change the opacity of your image without changing the content within the ovelay.
I want the background of the header to fade in after a number of pixel scrolled. With the code below i kinda get it but not much right! Any idea? thanks!
$(function () {
$(window).scroll(function () {
$(document).scrollTop() > 100 ? $('header').css({
"background": 1
}).fadeIn() : $('header').css({
"background": 0
}).fadeOut();
});
})
A combination of Miquel Las Heras and Owen 'Coves' Jones's answers, who both submitted a not completely on-topic or not complete answer.
Use background trasitions (CSS3) and jQuery simultaneously.
JSFiddle
jQuery
$(document).ready(function () {
$(window).scroll(function () {
if ($(document).scrollTop() > 100) {
$("header").addClass("scrolled");
} else {
$("header").removeClass("scrolled");
}
});
});
CSS
header {
background-color:blue;
-webkit-transition: background-color 700ms linear;
-moz-transition: background-color 700ms linear;
-o-transition: background-color 700ms linear;
-ms-transition: background-color 700ms linear;
transition: background-color 700ms linear;
}
header.scrolled {
background-color: red;
}
Update February 3rd, 2017
browser support is very good, and the less performing jQuery solution below should not be used. Browser support.
Cross-browser solution
If you want to make it more cross-browser compatible, you can try the color plugin. But from what I've tested, it has quite a bad performance.
JSFiddle
$(document).ready(function () {
$(window).scroll(function () {
if ($(document).scrollTop() > 100) {
$("header").animate({
backgroundColor: "red"
}, 200);
} else {
$("header").animate({
backgroundColor: "blue"
}, 200);
}
});
});
Don't forget the plugin itself:
//cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.js
First, as was mentioned in the other answer, you will need to include jQuery UI or the jQuery Color plugin for color animation.
Second, and this is just winging it, but give this the old college try:
$(function(){
$(window).scroll(function(){
var $scrollPercent = ($(document).scrollTop() / 100);
if($scrollPercent <= 1){
$('header').css({backgroundColor:'rgba(0,0,0,'+$scrollPercent+')'});
}
});
});
This should give you a gradual fade in based on the amount down the page you scroll. This means that if you scroll 50 px down, your background color opacity would be set to 50% (50 px down / 100 px height wanted). You can also easily change the amount of height that you want to scroll down to reach full opacity very easily this way.
EDIT So it turns out you just want to fade in the color after 100px ... not my gradual fade in. No problem.
Others have pointed out the wonderful (and much better) CSS3 way to do it ... create a transition effect, and add a class on scroll. I won't steal their thunder, but I shall provide an alternative that works back to ancient browsers too.
Add an additional line of HTML inside of your header at the top:
<div class="header">
<div class="headerBackground"></div>
<!-- other header stuffs -->
</div>
Then set its CSS as such:
.header {
position:relative;
}
.headerBackground {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background-color:rgb(0,0,0);
opacity:0;
filter:alpha(opacity=0); // for IE8 and below
}
Then use the following jQuery:
$(function(){
$(window).scroll(function(){
var $bg = $('.headerBackground');
if($(document).scrollTop() >= 100){
$bg.animate({opacity:1},500); // or whatever speed you want
} else {
$bg.animate({opacity:0},500);
}
});
});
This also has the added benefit of not requiring another library (jQuery UI / jQuery Color plugin). The downside is, of course, the non-semantic HTML. Like I said, just another alternative.
I prefer to create 2 css classes for this type of issues. One for when window is scrolled and one for when it's not:
header { background: transparent; }
header.scrolled { background: #f2f2f2; }
Then the javascript should be:
$(function () {
$(window).scroll(function () {
if($(document).scrollTop()>100){
$('header').addClass('scrolled');
}
else {
$('header').removeClass('scrolled');
}
});
})
your code is correct, but jQuery does not natively support color animation. you need a plugin or jquery-ui for that: http://jqueryui.com/animate/
EDIT: actually, your code is kinda wrong. you want to set the backgroundColor to something. background: 1 is invalid css:
so .css({'backgroundColor': 'red'}) and then .css({'backgroundColor': 'blue'})
If you don't need to support a lot of older browsers you can animate background colours with a combination of jQuery and css3 transitions:
Take the HTML:
<div id="myBox">Stuff here</div>
And the javascript:
var myBox = $('#myBox');
myBox.on('click', function (el) {
myBox.css('background-color', 'red');
}
Then click the element #myBox will change its background colour red. Instantly, with no fade.
If you also put in place the css code:
#myBox {
-webkit-transition: background-color 300ms ease-in-out;
-moz-transition: background-color 300ms ease-in-out;
transition: background-color 300ms ease-in-out;
}
Then any colour changes to the background will be faded over 300ms. Works on all latest version browsers, but not on IE 9 and below.
The solution that I ended up using is as follows:
I created a section that I'm fading in and out based on the scroll position.
CSS
.backTex {
width:100%;
height:500px;
margin-top:50px;
background-color: #myGreen;
//Height
transition: height 0.5s ease;
-webkit-transition: height 0.5s ease;
-moz-transition: height 0.5s ease;
-o-transition: height 0.5s ease;
-ms-transition: height 0.5s ease;
//Background-Color
transition: background-color 0.5s ease;
-webkit-transition: background-color 0.5s ease;
-moz-transition: background-color 0.5s ease;
-o-transition: background-color 0.5s ease;
-ms-transition: background-color 0.5s ease;
transition: background-color 0.5s ease;
}
jQuery
$(document).scroll(function() {
var positionScroll = $(this).scrollTop();
if(positionScroll <= 499) {
$(".backTex").css("background-color", "#fff");
} else if (positionScroll > 500 && positionScroll < 1100) {
$(".backTex").css("background-color", "#2ecc71");
} else {
$(".backTex").css("background-color", "#fff");
}
});
As far as compatibility, I haven't noticed any issues between browsers as of yet. Please reply to my post if you experience any. Thanks!
I have tried and failed to get this working. Basically I am trying to get it so that when you hover over one div, it should change the sibling's opacity to 0.5 that has class="receiver".
If you see this jsFiddle, there are 2 divs with class="outerwrapper", and both contain 2 divs of classes hover and receiver. When you hover over the div with class hover, the receiver's opacity should be set to 0.5, but only the one inside the same div (outerwrapper).
Any help would be much appreciated. Thanks in advance.
You don't need to use jQuery, or JavaScript, for this (though you can1), CSS is quite capable in most browsers of achieving the same end-result:
.hover:hover + .receiver {
opacity: 0.5;
}
JS Fiddle demo.
And also, even with 'only' CSS, in modern/compliant browsers, it's possible to use fade transitions (or, strictly speaking, to transition the opacity):
.receiver {
width: 50px;
height: 50px;
background-color: blue;
opacity: 1;
-webkit-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-ms-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
transition: opacity 1s linear;
}
.hover:hover + .receiver {
opacity: 0.5;
-webkit-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-ms-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
transition: opacity 1s linear;
}
JS Fiddle demo.
I was going to provide a JavaScript/jQuery solution as well, but there are several others already posted, now, and I'd rather not repeat other people's answers in my own (it just feels like plagiarism/copying).
Something like this would do it: http://jsfiddle.net/UzxPJ/3/
$(function(){
$(".hover").hover(
function(){
$(this).siblings(".receiver").css("opacity", 0.5);
},
function(){
$(this).siblings(".receiver").css("opacity", 1);
}
);
});
References
.siblings() - Get the siblings of an element - http://api.jquery.com/siblings/
.hover() - Catch the mouseover/mouseout events - http://api.jquery.com/hover/
$('.hover').hover(function() {
$(this).next('.receiver').css('opacity', 0.5);
}, function() {
$(this).next('.receiver').css('opacity', 1.0);
});
http://jsfiddle.net/2K8B2/
(use .siblings or .nextAll if the .receiver is not necessarily the next element)
This works:
$(document).ready(function() {
$('.hover').hover(function() {
var $parent = $(this).parent('.outerwrapper');
$parent.find('.receiver').css({ opacity : 0.5 });
}, function() {
var $parent = $(this).parent('.outerwrapper');
$parent.find('.receiver').css({ opacity : 1 });
});
});