I am creating a dialog window for a program. It will be a simple popup that can display whatever message we pass, as well as an image for success or error.
I can make the WebDialogWindow fade in by simply adding the CSS class "FadeIn3" to the window itself. (Code is below) The window fades into view and works great. I have a button inside the window that will call a Javascript function to close the window. When that's clicked, instead of the window instantly disappearing I'd like to have the window fade away over the course of 1 or 2 seconds. Does anyone know how I can achieve this?
WebDialogWindow
<ig:WebDialogWindow ID="dialogMessage" runat="server" WindowState="Hidden"
Width="300px" Height="150px" Modal="true" InitialLocation="Centered"
CssClass="fadeIn3" StyleSetName="Default">
...
<asp:Button ID="btnCloseWindow" runat="server" Text="Close" OnClientClick="return hideWindow();" />
</ig:WebDialogWindow>
CSS
.fadeIn3 {
-webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 3s; /* Firefox < 16 */
-o-animation: fadein 3s; /* Opera < 12.1 */
animation: fadein 3s;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
#-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
#-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
Javascript
function hideWindow() {
oDialog1 = $find('<%= dialogMessage.ClientID %>');
//I think I need something here to add a "fadeOut" CSS class to the window
// that would cause it to fade out. If I add it directly to the
// CSSClass property then the window fades in, fades out, then appears
// until the close button is clicked, at which point it instantly disappears.
oDialog1.set_windowState($IG.DialogWindowState.Hidden);
return false;
}
Do you think jQuery "fadeOut" method would do the work for you?
It would look like something like this:
<script type="text/javascript">
function complete() {
oDialog1 = $find('<%= dialogMessage.ClientID %>');
oDialog1.set_windowState($IG.DialogWindowState.Hidden);
return false;
}
function hideWindow() {
$("#dialogMessage").fadeOut(2000, complete);
return false;
}
</script>
You can set the animation's duration in the first argument (in the example - 2 seconds).
.fadeOut()
I just ended up making 2 fadeInOut CSS classes, one for 3 seconds, and one for 5. Then I apply that class to the dialog window, and call a function called timedHide() with the same number of seconds. That function will wait that many seconds and then call the original hideWindow() function at around the same time the fadeInOut script is finishing up.
CSS
#keyframes fadeinout {
0% {opacity: 0;}
10%{opacity: .2;}
20%{opacity: .4;}
30%{opacity: .6;}
40%{opacity: .8;}
50%{opacity: 1;}
60%{opacity: .8;}
70%{opacity: .6;}
80%{opacity: .4;}
90%{opacity: .2;}
100% {opacity: 0;}
}
Javascript
function timedHide(numSeconds) {
var timeout = 1000 * numSeconds;
setTimeout("hideWindow()", timeout);
}
Related
I have code something like this in react
{this.state.popoverOpen && <Popover/>}
it's easy, but when the component actually appears I want it to come in with opacity changing and animating...
I've been working with react for some time but these cases always leave room for confusion for me...
So whats the best and easy solution? no applying classes work obviously at this point...
You can use CSS transitions. Try adding the fade-in to the className of Popover's outermost HTML element after adding the code below to the relevant CSS file.
.fade-in {
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
#-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
#-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
#-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
Codepen example: https://codepen.io/rodenmonte/pen/LYpOVpb
Here's a StackOverflow answer showing another (better IMO) way to do this ReactJS: Fade in div and fade out div based on state
I came across this page https://pepecph.com/ and thought the fade in effect of the pictures were really cool.
I tried to imitate that effect with styled-component to pass each picture's index as a way to separate them when they are all fading in.
-webkit-animation: ${props =>
`fadein ${props.index}s`}; /* Safari, Chrome and Opera > 12.1 */
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
Here is the demo: https://codesandbox.io/s/focused-clarke-eduf1
However it is not quite doing what that page seems to be doing, no matter how I adjust the time of fade-in. On the original page(https://pepecph.com/), every picture is showing up fast and delayed differently for some time. And I inspect the image element of the original page, it has this line of css
transition: top 70ms cubic-bezier(0.25,0.46,0.45,0.94),left 70ms cubic-bezier(0.25,0.46,0.45,0.94),transform 70ms cubic-bezier(0.25,0.46,0.45,0.94),height 150ms cubic-bezier(0.25,0.46,0.45,0.94) 70ms,-webkit-transform 70ms cubic-bezier(0.25,0.46,0.45,0.94)
I am not good at css so I don't know if this has something to do with that visual effect.
I edited your code a little bit, let me explain what I've done:
First we need to start with zero opacity images till those are loaded, we can also add a delay transition based on the index of the image.
<Image
pose={pose}
{...props}
style={{
opacity: this.state.opacity,
transition: "opacity 2s cubic-bezier(0.25,0.46,0.45,0.94)",
transitionDelay: `${props.index * 0.5}s`
}}
/>
We also need to add a setter function to change the opacity state via refs:
toggleOpacity = o => {
this.setState({ opacity: o });
};
The tricky part was to track the images refs, this is how it looks, we also removed all keyframes since those are no longer necessary:
const Gallery = () => {
const [isSelected, setIsSelected] = useState(null);
const refs = {};
let images = [];
for (let i = 0; i < 10; i++) {
refs[i] = useRef(null);
let height = Math.floor(Math.random() * 400 + 400);
let width = Math.floor(Math.random() * 400 + 400);
images.push(
<PicContainer index={i} key={i} selected={isSelected}>
<ZoomImg
src={`https://source.unsplash.com/random/${height}x${width}`}
onLoad={() => {
// Calling ref function
refs[i].current.toggleOpacity(1);
}}
// Setting ref
ref={refs[i]}
index={i}
setIsSelected={setIsSelected}
/>
</PicContainer>
);
}
return (
<Mansory gap={"15em"} minWidth={600}>
{images.map(image => image)}
</Mansory>
);
};
Here is the full example.
Here's an example. The HTML requires a div to be wrapped around the whole of the body content if you want it to fade in all at once. Look for this:
<div class="wrapper fade-in">
There's a lot of stuff you can do with CSS, I've been using it for years and I still learn something new every once in a while.
All the animation commands will appear in your CSS like so:
#keyframes fadeIn
to {
opacity: 1; }
Then your divs are going to have a class that calls the animation (#keyframes):
.fade-in {
animation: fadeIn 1.0s ease forwards;
[other div properties can be included here]
}
The HTML will look like this:
<div class="fade-in">
[content]
</div>
Finally, you'll need to make sure you include the vendor codes to make it compatible with all browsers [which adds a fair amount of code, which is why jQuery can be a better option for this stuff]:
#keyframes fadeIn{
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-moz-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-webkit-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-o-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-ms-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
The vendor codes will have to be duplicated again in your div class in the CSS:
.fade-in {
animation: fadeIn ease 5s;
-webkit-animation: fadeIn ease 5s;
-moz-animation: fadeIn ease 5s;
-o-animation: fadeIn ease 5s;
-ms-animation: fadeIn ease 5s;
}
I am trying to make text appear after 1 min of the user being on the site and going away after 2sec.
I know how to make it fade out:
setTimeout(fade_out, 2000);
function fade_out() {
$("#msg").fadeOut().empty();
}
But I need help on making it fade in.
I don't understand JS that well so please try to include a example.
Jquery might be the easiest answer, but you can also do that with pure CSS Animations, without any javascript.
HTML :
<p id="element">P IS SHOWN</p>
CSS :
#element {
padding: 50px;
background: red;
color: white;
}
#element {
-moz-animation: cssAnimation 64s ease-in;
/* Firefox */
-webkit-animation: cssAnimation 64s ease-in;
/* Safari and Chrome */
-o-animation: cssAnimation 64s ease-in;
/* Opera */
animation: cssAnimation 64s ease-in;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#keyframes cssAnimation {
0% {opacity: 0;display:none;}
/* 59 sec : start fading in*/
92% {opacity: 0;display:block;}
/* 60 sec : visible */
94% {opacity: 1;display:block;}
/* 62 sec : start fading out */
97% {opacity: 1;display:block;}
/* 63 sec : not visible */
99% {opacity: 0;display:block;}
/* 64 sec */
100% {opacity: 0;display:none;}
}
Here's a Fiddle (6 seconds duration) : DEMO
In addition to your code use fadeIn() and delay() ::
Note:: On this demo I use short times that you can adjust later to your needs
setTimeout(fade_in, 2000);
function fade_in() {
$("#msg").fadeIn().delay(1000).fadeOut();
}
#msg {
display:none;
padding: 50px;
background: red;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="msg">ALERT</div>
You are on the correct track. Just need to fadeIn before fading out
//fade in in 6 seconds (change to 60000 for 1 minute)
setTimeout(fade_in, 6000);
//function to fade it in
function fade_in() {
$("p").fadeIn();
//in this function we can start to fade out after 2 seconds
setTimeout(fade_out, 2000);
}
//function to fade out
function fade_out() {
$("p").fadeOut();
}
example:
https://jsfiddle.net/j0p7dvLn/
setTimeout(
function()
{
$("£msg").fadeIn(200);
//call the fade out function here
}, 60000);
Source: How to wait 5 seconds with jQuery?
To fade the text in after 60 seconds, and then fade it out 2 seconds later, you can do something like this:
var fadeOutText = function () {
$("#msg").fadeOut(); // select the message and fade it out
};
var fadeInText = function () {
$("#msg").fadeIn(); // select the message and fade it in
setTimeout(fadeOutText, 2000); // set the text to fade out in another 2 seconds (2000 ms)
};
setTimeout(fadeInText, 60000); // start the fade in after 60 seconds (60000 ms)
I have searched for a couple hours now and cant seem to find the correct solution to this. I need to fade in a background image after its loaded. The loading and fadeIn() works with the code i have pasted but it is choppy. So i want to use easeInOutQuad with fadeIn() to see if its smoother. (the reason it is choppy is because there is other script at work doing other things at the same time).I tried this:
$(".wings-wrapper").fadeIn(2000, 'easeInOutQuad', function(){});
But it did not work .
var backgroundImage = $(currentWing).data("background-url");
var bgimage = new Image();
bgimage.src = backgroundImage;
$(bgimage).load(function(){
$(".wings-wrapper").css("background-image","url("+$(this).attr("src")+")").fadeIn(1000);
});
It seems you are looking to load an image with fade-in effect.
You may do this either with javascript or with CSS
Javascript:
Simply hide the image once loaded and use fadeIn() to make it appear again with a fade effect.
$(".jsfade").hide(0).delay(500).fadeIn(3000)
Where .jsfade is the class attached to an image
CSS:
You can also use CSS animations to change the opacity of the image to create a fadeIn effect. For an image with .fade class,
<img src="image.jpg" class="fade" />
You can define the css classes as follows
.fade {
opacity: 1;
animation: fadein 2s;
-moz-animation: fadein 2s; /* Firefox */
-webkit-animation: fadein 2s; /* Safari and Chrome */
-o-animation: fadein 2s; /* Opera */
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes fadein { /* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-o-keyframes fadein { /* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
.fade:hover {
opacity: 0.5;
}
UPDATE:
jQuery UI specifies the following signature for show/hide/fadeIn functions
.show( [duration,] [easing,] [callback] )
Having said that, following is the code with different easing options
$(".jsfade").fadeIn(3000, 'linear') //WITH LINEAR AS EASING OPTION
$(".jsfadeEaseinOutQuad").fadeIn(3000,'easeInOutQuad') //with easeInOutQuad as the easing option.
So, the reason why $(".wings-wrapper").fadeIn(2000, 'easeInOutQuad', function(){}); doesnt seem to work is because your content is probably already visible and hence fadeIn() will essentially do nothing. To See the effect, you need to hide the elements first and then apply the fadeIn().
Use the css property display:none to hide .wings-wrapper
Here's the UPDATED plunkr with both approaches.
A page of my website has a news feed where I use AJAX to return each day one at a time and display it. I want each days news to appear with a fade in.
The problem is the fade in repeats, for each day that I return
Html
<div id='newsdiv' class='newsDiv'></div>
Javascript AJAX call
document.getElementById('newsdiv').innerHTML += xmlhttp.responseText;
CSS
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
#-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
#-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
#-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
.divFadeIn, .centreScreen, .tbl_houseForm {
-webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 3s; /* Firefox < 16 */
-ms-animation: fadein 3s; /* Internet Explorer */
-o-animation: fadein 3s; /* Opera < 12.1 */
animation: fadein 3s;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-ms-animation-iteration-count: 1;
-o-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
If I put the fade in the parent to the new feed, then it'll fade in when the first day is returned, but not for any of the following days.
If I put the fade in on a child div, then it'll fade in when each and every day is returned (i.e. repeating the fade in when the next day is returned).
How do I stop this from happening? How do I stop each day from fading in more than once?
I do understand that each day is only fading in because the div "divNews" is being re-populated. But this understanding doesn't solve my problem.
You should append a new element in your parent div instead of updating the whole content.
You can return json with your ajax call and create the new element on the fly with the returned data on the callback function.
A simple example using jquery :
$.get('your_url',function(data){
var el = $('<div></div>').addClass('animation_class').html(data.key);
$('#newsdiv').append(el);
});
I solved it myself.
I made sure the fade in was done by a div that did nothing else and then before I add the following days news I removed the class name from the div.
var sTempNewsFeed = document.getElementById('newsdiv').innerHTML;
sTempNewsFeed = sTempNewsFeed.replace('class=\'divFadeIn\'', '');
sTempNewsFeed = sTempNewsFeed.replace('class=\"divFadeIn\"', '');
sTempNewsFeed += xmlhttp.responseText;
document.getElementById('newsdiv').innerHTML = sTempNewsFeed;