Javascript / CSS - fading in an image which doesn't appear? - javascript

When my webpage loads, I want there to be links. Once all the links are clicked, I want an image to fade in on the bottom of the page (the image says 'complete' which basically means the user has completed clicking all the links). I first hide the image when the webpage loads, like so;
<html>
<body>
<!-- links which need to be clicked go here -->
<img id='complete' src='../images/complete.png' alt='' />
</body>
</html>
<style>
#complete {
visibility: hidden;
}
</style>
<script>
// once all links are clicked
$('#complete').fadeIn();
</script>
With this code, #complete does not fade in (probably because visiblity is set to hidden). I tried making visiblity set to visible right before the fade in command but that still didn't make it fade in. I also tried making the css
#complete {
filter: alpha(opacity = 0);
}
and the script
$('#complete').fadeTo('slow', '100');
and that doesn't work, #complete just appears really fast rather than fading in slowly.
I am using IE8 with CSS, any idea on how to fix this?

on css
#complete {
display: none;
}
and on javascript
$('#complete').fadeIn();
And try to use latest jquery
<body>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
</body>
See it on action: http://jsfiddle.net/KUqJL/ your problem is what I said about css

#complete {
visibility: hidden;
} replace with: display:none

Change your css to:
#complete {
display:none;
}
and if you'd like to use .fadeTo(), the second parameter must be an integer between 0 and 1.
$('#complete').fadeTo("slow", 1);
"slow" could also be replaced with a millisecond value such as 3000 (3 seconds), for an even slower fade.
$('#complete').fadeTo(3000, 1);
Here is a fiddle that may help.

visibility cannot be animated. Something is either visible or hidden, there are no middle stages.
But you can achieve this effect by using opacity instead of visibility, since visible elements have an opacity between 0 and 1.
#complete {
visibility: visible; /* this is the default so this line is not required */
opacity: 0;
}
And use the .animate() method.
$('#complete').animate({
opacity: 1.0
}, 'slow');
jQuery has methods like .fadeIn() .fadeTo() and .fadeOut() which animates opacity with the addition of setting the display property to none on 0 opacity and vica-versa when animating.
Since display: none not only makes elements invisible, but collapses them (width and height are 0 and the element is not part of the layout), I think the opacity property is more suitable for you.
This can also be done with CSS transitions:
#complete {
opacity: 0;
-moz-transition: opacity 0.8s linear;
-o-transition: opacity 0.8s linear;
-webkit-transition: opacity 0.8s linear;
transition: opacity 0.8s linear;
}
#complete.fadedIn {
opacity: 1;
}
And the JavaScript than changes to:
$('#complete').addClass('fadedIn');

Related

Is there a way to get a fade in effect from hidden visibility (CSS, JS)?

In my webpage, I used CSS to set opacity=0 and transition:opacity linear 0.5s in the body, then used JS to set opacity=1 when the page loads. However, there is a <div> that I want to remain invisible, so I used CSS to set visibility="hidden". If I used opacity, my <div> would appear with the rest of the page.
Is there either
1. A way to set the body's opacity to 1, but not a <div> element inside it (I considered applying opacity to sections around it but I would like the entire page to appear at once)?
2. A way to fade in the text other than opacity (I tried the fadeIn() from jQuery, but I don't think it worked when my visibility was still hidden)?
Apply the visibility:visible for the div:
#main{
visibility: hidden;
}
#child{
visibility: visible;
}
<div id="main">main is not visible
<div id="child">child still visible</div>
</div>
Do opposite if you want child to be invisible and main visible. (But I don't think this is what you want.)
#main{visibility:visible;}#child{visibility:hidden;}
#main visibility is not necessary if this is the case.
The div with opacity set to 0 should still remain invisible, even though the body is now visible.
Refer to my example here:
http://codepen.io/partypete25/pen/rePXag
CSS
body {
opacity:0;
background:red;
transition:opacity linear 2s;
}
div {
width:100px;
height:100px;
background:blue;
opacity:0;
}
JAVASCRIPT
var x = document.getElementsByTagName("BODY")[0];
x.style.opacity = "1";

are there any methods to implement page transitions when using <a href>?

i made some several html files. at the main page i just wrote down some codes like this
<a href="new.html>
<img src="img/button" id="buttonid">
</a>
when i click the button, i see that the web starts new.html activity. I want to put some smooth page transitions when i open that "new.html". I searched through internet, and found out that most of the page transitions are done by putting other class into format. Whatever, are there any methods for page transitions that can be implemented when using ??
You have to hijack your <a> tag and handle its behaviour through javascript.
FadeOut part
Start with giving it an empty target :
...
So when you click it, nothing happens.
Then, use a custom attribute to store the URL you want to load when clicking this tag :
...
Then add some class that will allow javascript / jQuery to target your link :
...
In your javascript, target your smoothLinks and write a delayed action (using jQuery here) :
$("a.smoothLink").click( function(e){
$("body").fadeOut(function(){ // This will fade out your entire page in about half a second. When it's done, execute the callback function
window.location = e.currentTarget.attributes['data-url'].value;
});
}
However, for performance reasons, I strongly advise you to prefer CSS3 opacity animations (opacity 1 --> 0 --> 1) because, unlike jQuery's fade functions, they're hardware accelerated.
Here's how to do :
(JS)
$("a.smoothLink").click( function(e){
$("body").addClass("fadeOut"); // anything with the "fadeOut" class will become transparent in 1s in our CSS
setTimeout( function(){ // wait 1s, then change URL
window.location = e.currentTarget.attributes['data-url'].value;
}, 1000)
}
(CSS)
.fadeOut {
opacity: 0;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
FadeIn part
Once your new page is loaded, it has to be blank, then fade in. Start with making the whole body transparent :
(CSS)
body{
opacity :0;
}
Then, fade it in.
Using the jQuery method :
$("body").fadeIn()
Using the CSS3 method :
In your HTML, give the body a "fadeIn" class :
(HTML)
<body class="fadeIn">
Back to your CSS, write an instruction for fading in anything with the "fadeIn" class :
(CSS)
.fadeIn {
opacity: 1;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
So, on page load, your body will gradually get visible in 1 second.
I have to say this in untested, but should be a nice hint :)
EDIT - **
**Simpler solution with a white overlay
Just cover your whole page with a full white overlay, that you can make transparent or opaque at will :
(HTML)
<div id="overlay"></div>
(CSS)
div#overlay{
position: absolute;
z-index:999;
top:0;
left:0;
width: 100%;
height: 100%;
background:white;
pointer-events:none; // so you can click through
opacity : 1;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
(JS)
$("div#overlay").css("opacity",0); // will fade out the overlay on page load
$("a.smoothLink").click( function(e){
$("div#overlay").css("opacity",1);
setTimeout( function(){ // wait 1s, then change URL
window.location = e.currentTarget.attributes['data-url'].value;
}, 1000)
}
The only way to make some transition is to use ajax as Jquery Mobile does in example (have a look at http://demos.jquerymobile.com/1.0a4/docs/pages/docs-transitions.html).
There is one way to sort of spoof it, I use Jquery for ease of use here.
in your css set the body tag to display none then with jquery on document load set it to fade in, I've done it at 3 seconds for effect and done an alert etc. muck around with it..
$( "body" ).fadeIn( 3000, function() {
alert('Billys spoofed slow sort of fade in');
$('body').css('color','red');
});
body{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Hello from fade in</h1>

Why do jQuery's .fadeOut() and .fadeIn() stop working when a transition is applied in CSS

When I apply a transition on an element with CSS, jQuery's .fadeOut() and .fadeIn() stop working.
I have a Solution for this but, why does this happen?
Why do .fadeOut() and .fadeIn() work like .hide() ?
Where have the effects gone while there is a css transition being applied?
When I have to apply any jQuery animation, I always remove the transition and then apply jQuery animation and then add the transition back!
Is there any other trick to do this? Or is this the only way?
cloned.css('transition', 'none');
cloned.fadeOut();
setTimeout(function(){
cloned.css('transition', 'all 500ms cubic-bezier(0.5, 0.1, 0.7, 1.5)');
});
fadeOut and fadeIn will work with transitions, so long as you are not setting the transition to effect changes in opacity.
Working Example
$('.div1').click(function () {
if ($('.div2').is(':visible')) {
$('.div2').fadeOut(3000);
$('.div2').css('height', '0px');
} else {
$('.div2').fadeIn(3000);
$('.div2').css('height', '400px');
}
});
.div1 {
height:20px;
width: 200px;
background: blue;
}
.div2 {
display:none;
height:100px;
width: 200px;
background: red;
transition: background-color 3s, height 3s;
}
Here's why this works:
The .fadeOut() method animates the opacity of the matched elements.
Once the opacity reaches 0, the display style property is set to none,
so the element no longer affects the layout of the page.
From the API Documentation
So, basically both fadeOut and fadeIn animate the opacity of the element, if you set transition: all or transition: opacity you're trying to run two different animations on the same property at the same time.
To work around this you can simply specify which properties you want the css transition to apply to.
Rather than using this:
.some_element {
transition: all 1s;
}
Use this:
.some_element {
transition: height 1s, background-color 1s, some_other_property 2s;
}
JQuery .fadeOut()/.fadeIn() will not work with Transition. Because CSS Transition equivalent to them. As they are equivalent, always the last option will be in action. If you want both try CSS animation property. This could help you-
http://jsfiddle.net/webdevron/9a79L/
Again if you want to use a jQuery function then write as bellow:
cloned.css('transition', 'none');
cloned.fadeOut( "slow", function() {
// Animation complete.
});

Slide + fade effect using CSS transitions

I'm trying to replicate this effect using CSS effects or transitions.
Using animations I can animate the opacity, but only fadeIn, and the height (which should control the slide) doesn't seem to work at all :(
The closest I've got is by using javascript to set a temporary class on the element I want to animate, and on which I apply the initial opacity. But height doesn't work either. And there seems to be a slight delay on animation start.
Any other ideas?
So I ended up using the solution posted in the question Simon mentioned: With javascript I wrap the element I want to animate within a "wrapper" DIV on which I apply the animation. The wrapper will get its height changed from 0 to the height of the content DIV every time the label is clicked:
fiddle here
I know it requires some javascript, but the idea is to make the animation in CSS, and this is what it does. And if JS is disabled, the toggle will still work...
You can't currently animate on height when one of the heights involved is auto, you have to set two explicit heights. There's an extensive workaround posted as an answer to this similar question.
I made an alteration to your JS Fiddle, I beleive this is what you want; please see it here.
You need to specify a height on the div originally (0) and don't forget overflow:hidden; so that the content doesn't 'spil out' of the div. You will still need jQuery / Javascript however, to toggle a class but it means much less Javascript is required. (I toggled the class "change" which you will see on that fiddle)
input {
display:none;
}
label {
display:inline-block;
}
div {
white-space: pre;
background: #eee;
color: #333;
overflow:hidden;
height:0;
opacity:0;
-moz-transition:height 1s opacity 1s;
-webkit-transition:height 1s opacity 1s;
-o-transition:height 1s opacity 1s;
-ms-transition:height 1s opacity 1s;
transition:height 1s, opacity 1s;
}
.changed {
height:200px;
opacity: 1;
}
I added a few vendor prefixes to the transition CSS propery as I'm not sure what browser you'll be using and I'm on firefox so I need the -moz- prefix lol :)
The only problem I can see with this is that height:auto or height:100% doesn't animate, so you'll need to specify ems or px... If this is going to be a problem (like if the content will be dynamic), I would advise using jQuery for the height animation.

CSS3 transition fade-out display property

I was trying to make fade out transition with css3 but found out that display is not working with transitions.
i have a group object <div id=groupID> with <h2> title and <div class='group'> and i have onclick event bind to <h2> that should make group class to dissapear. i've tried to overcome display problem with {opacity: 0; height: 0; overflow: hidden;} This works fine as it has same effect as {display:none} BUT with
CSS
transition: all 2s ;
-webkit-transition: height 2s ease-out;
transition: opacity 2s ease-out ;
display: block;
-webkit-transition: opacity 2s ease-out;
JS
//collapse function
block.setStyle({opacity: 0});
block.setStyle({height: 0});
//expand function
block.setStyle({opacity: 1});
block.setStyle({height: 'auto'});
it doesn't do any animation on close but it fades in on reappearance. It just disappear instantly.
yes i need it in CSS3. NO, i can't use jQuery
any idea?
Thanks
Don't try and transition to and from auto. It won't work.
You may be able to calculate the height in pixels of the element with JavaScript and use that in your block.setStyle() calls.

Categories