Slide DIV from right of window - javascript

I have a div that i need to slide out from the right on page load and stay locked on the right side of the window. It would be great if it could delay for about 5 seconds and then slide out
<script type="text/javascript">
$("#slide").animate({width: 'toggle'}, 500);
</script>
html
<div id="slide"><img src="live.jpg"></div>
What am i missing?

You could try a couple of options.
If you want to use .animate(), you'll want to change the position from it's initial state. So in your CSS, you'll want to set the initial state of your div to something that is off of the page, like
#slide {
position: absolute;
right: 999em;
}
With this set, adding .animate() will animate the property you specify toward the value you specify, so specify where you want your div to end up after the animation completes.
$("#slide").delay(5000).animate({right: 0}, 500);
An alternative would be to use the jQuery addClass() method. If you do this, you'll want to define two classes in your stylesheet. The first class will be your div's initial state, again, positioned offscreen; the second class will be where your div ends up. For the animation, just use a CSS animation like this:
.div-start {
position: absolute;
right: 999em;
transition: right 4s ease-in;
-webkit-transition: right 4s ease-in;
-moz-transition: right 4s ease-in;
}
.div-animate {
right: 0;
}
Then in your jQuery, do this:
$('yourDiv').addClass("div-animate");
Edit:
You could also use setTimeout on this to have it fire after 5 seconds, like so:
setTimeout(function() {
$('yourDiv').addClass("div-animate");
}, 5000);

$(document).ready(function(){
$('#slide').delay(5000).animate({"width":"20%"}, 0500);
});
This will delay your animation by 5 seconds from when the pages has fully loaded, and then slide the content out to a width of 20%. Here is an example: http://jsfiddle.net/EdjjH/

$(document).ready(function(){
$("#slide").delay(5000);
$("#slide").animate({
width: '500px',
height: '500px',
});
});
Here is the fiddle: jsfiddle
This fiddle has a 5 second delay so be patient when looking at it.

Related

making position:absolute div relative after toggleFade()

I've got a project where i've overlaid two imaged and have the top image fade out using a toggleFade function, when the user clicks a toggler (checkbox). it works well, except that to get the images to function correctly the bottom image is set to position:absolute. Of course, when the toggleFade() happens, the absolute positioning means all the lower divs float up.
$(document).ready(function(){
$('.lights').on('click', function (){
$('.day').fadeToggle(3000);
setTimeout(function() {$('.night').css('position: absolute');}, 3000);
});
});
is there any way to prevent this from happening? i've tried setTimeout for the lower div, but that didn't work.
here's the jsFiddle of my project:
https://jsfiddle.net/jsieb81/oue2fnr0/
You can add a class on click event and manage opacity in css with a transition. Like this :
(You don't need jQuery)
document.querySelector('.lights').addEventListener('click',function(){
document.querySelector('.day').classList.add('hide');
});
.hide {
opacity: 0;
-webkit-transition: opacity 3s;
transition: opacity 3s;
}
see this fiddle https://jsfiddle.net/oue2fnr0/9/

show a website loading image using only CSS (not Javascript or jQuery)

How can i put a logo and a loading image when a user open the website
when the user open the website the logo appear with a loading image than the home page appear after a certain moment like this website
http://www.theprofessionalslb.com/
and it possible to do that without using javascript or jquery only in css?
Yes, you can animate with pure CSS using the animate property.
For example, if you would want #img1 to show first, and #img2 to show after, you can set an animation-delay on your second image and make that equal to the animation-duration of your first:
#img1 {
...
animation-duration: 2s;
...
}
#img2 {
...
animation-delay: 2s;
...
}
Then in your animation you can animate e.g. the opacity property to simulate a fade-in effect.
More on CSS Animations here.
EDIT
I created a fiddle doing what you want.
For support in more browsers, please advice caniuse.com.
Use loader image and apply it to body. Show the image till page load and when page is ready remove the image.
jQuery( window ).load( function(){
//show the image here.
});
jQuery( document ).ready( function(){
//hide the image here.
});
The way they did it, it's handled by jQuery-Animations, something like this:
// Fade-In logo
$('#logo').fadeIn(2000, function() {
// When done, fade-in the slogan
$('#slogan').fadeIn(1400, function() {
// When this is done, wait 1s and then fade both out
$('#logo, #slogan').delay(1000).fadeOut(2000, function() {
// Finally fade-in the content
$('#content').fadeIn(2000);
});
});
});
The first argument of the fadeIn-method is the animation-time, the second argument is the callback-function, that gets executed after the animation is done. For more information see its documentation.
This technique assumes either, that your animated elements are either set to opacitiy: 0 in their CSS, or that you set them hidden in your JS:
$('#logo, #slogan, #content').fadeOut(0);
or:
$('#logo, #slogan, #content').hide();
You could also use plain CSS for this, where you would do something like this:
#logo, #slogan, #content {
opacity: 0;
}
#keyframes fadeInAndOut {
0% { opacity: 0; }
50% { opacity: 1; }
75% { opacity: 1; }
100% { opacity: 0; }
}
#logo {
animation-name: fadeInAndOut;
animation-duration: 6400ms;
}
#slogan {
animation-name: fadeInAndOut;
animation-duration: 4400ms;
animation-delay: 2000ms;
}
#content {
transition: opacity 2000ms ease-out 6400ms;
opacity: 1;
}
Please be aware that both examples are untested and should just give you an idea. You will probably need to also use the -webkit-keyframes prefixed version for the animation and also if you want the animation timings to be visually perfect, you'd need two separate fadeInAndOut-keyframes for both.

CSS3 Transitions happen instantly?

I have an element called #artwork which needs to be animated:
#artwork{
-webkit-transition: all 20s ease-in;
transition:all 20s ease-in;
width:75%;
display:block;
margin:0px auto;
}
#artwork.trans{
width:60%;
}
The problem is, the transition happens instantly without any delay (in my case 20s). I have tried Jquery's toggleClass function to no avail and I also tried the css function which also didn't work.
$(window).load(function(){
var addImage = function(background){
$("#images").append("<div class='image'><img id='artwork' src='"+ background +"' /></div>");
$("#artwork").css("width", "65%");
$("#artwork").toggleClass("trans");
};
addImage("http://4.bp.blogspot.com/-f5Oju8nYOe4/T91Kdqww3GI/AAAAAAAAGEk/s1tZR76WQfc/s1600/winter-wallpaper-7.jpg");
});
The element needs to be drawn on the page before it can be transitioned. If you add an element it's a good rule of thumb to give 10-100ms for the initial state to render before changing it's styles.
You may also want to consider using an animation instead, which you can do without the delay.
Here's an animation I've used to move something into the page from the right, feel free to modify it to suit your needs.
.some_class{
-webkit-animation: myanimation 500ms ease-in-out;
-moz-animation: myanimation 500ms ease-in-out;
animation: myanimation 500ms ease-in-out;
}
#-webkit-keyframes myanimation {
0% { left: 200%; }
100% { left: 0%; }
}
#keyframes myanimation {
0% { left: 200%; }
100% { left: 0%;}
}
You can't switch from display:none to display:block in a transition. This is why your animations are happening instantly.
Including the display change in the transition tells CSS to snap to position.
You need to switch display to block, then wait a frame, then apply your other new properties for them to animate. This is why when you change the values in the inspector they animate.
Here's a codepen showing an example of the above http://codepen.io/gunderson/pen/emyReW
When using the transition shorthand property, the delay is placed at the end. In your code, your transition will last 20s with no delay.
If you want it to be delayed by 20s, it should be written like this:
transition:all 2s ease-in 20s;
EDIT
Here is a demo
As Michael's answer above, the image need to be drawn before any animation taking effect.
Let's take a look at your code:
$(window).load(function(){
var addImage = function(background){
$("#images").append("<div class='image'><img id='artwork' src='"+ background +"' /></div>");
$("#artwork").css("width", "65%");
$("#artwork").toggleClass("trans");
};
addImage("http://4.bp.blogspot.com/-f5Oju8nYOe4/T91Kdqww3GI/AAAAAAAAGEk/s1tZR76WQfc/s1600/winter-wallpaper-7.jpg");
});
After the append function is called, the image begins to load. At this time, the browser will proceed other functions css or toggleClass below the append. Which is why you will never see your image animated.
To fix this, you need to put your append image code into another function, and animation code into another function, like this:
$(window).load(function(){
var addImage = function(background){
appendImage(background);
animateImage();
};
var appendImage = function(background) {
$("#images").append("<div class='image'><img id='artwork' src='"+ background +"' /></div>");
};
var animateImage = function() {
$("#artwork").css("width", "65%");
$("#artwork").toggleClass("trans");
};
addImage("http://4.bp.blogspot.com/-f5Oju8nYOe4/T91Kdqww3GI/AAAAAAAAGEk/s1tZR76WQfc/s1600/winter-wallpaper-7.jpg");
});
In this code, the addImage function will call two external functions, which will happen sequentially. By doing this, the animateImage will be called right after the appendImage function is finished.
This is the demo on Codepen.
Hope this helps.

CSS transitions don't work unless I use timeout

I have a couple of classes: hide is display: none, and transparent is opacity: 0. The element pr_container has -webkit-transition: opacity 1s. The following JQuery-based code makes an element appear in an animated fasion:
pr_container.removeClass("hide");
setTimeout(function() { pr_container.removeClass("transparent"); }, 0);
However, when I remove setTimeout and instead just remove the second class, there is no animation. Why?
Edit: I'm using the latest Chrome, I haven't checked other browsers yet.
Edit: I tried putting both calls in the same setTimeout callback - no animation. So it's clearly about separation.
Edit: here's the jsFiddle: http://jsfiddle.net/WfAVj/
You can't make a transition if you are changing display property at the same time. So in order to make it work you have to hide your element some other way. For example:
.hide {
height: 0;
width: 0;
/* overflow: hidden; padding: 0; border: none; */
}
http://jsfiddle.net/dfsq/WfAVj/1/
There's no reasonable "curve" to transit from one display status to another, so in current implementation of browsers, any transition that somehow involves display will end up with no transition at all.
With this code:
pr_container.removeClass("hide");
pr_container.removeClass("transparent");
You can imagine the two statements execute in a single "blocking" queue, so browsers practically renders the element from class="hide transparent" to class="", and as stated above, the hide class practically invalidates any existing transition.
By using
pr_container.removeClass("hide");
setTimeout(function() { pr_container.removeClass("transparent"); }, 0);
You told browsers to remove the "transparent" class "as soon as possible, but no in the same queue", so browser first removes "hide", and then moves on. The removal of "transparent" happens when the browser think it has resource to spare, thus the transition does not get invalidated.
only the "transperent" class produce animation .. "hide" is instant. So start the animation and if needed "hide" after 1 second:
test.addClass("transparent");
//hide after 1 sec, when the animation is done
setTimeout(function() {test.addClass("hide"); }, 1000); //1000ms = 1sec
http://jsfiddle.net/WfAVj/4/
By using suggestions in the linked question, I made a version that I'm satisfied with:
.test {
-webkit-transition: visibility 1s, opacity 1s;
}
.hide {
visibility: hidden;
}
.transparent {
opacity: 0;
}
http://jsfiddle.net/xKgjS/
Edit: now the two classes can even be combined to one!
Thanks to everyone!

CSS Animation pausing when element is hidden

I'm working on adding click/touch animations to buttons on a project I'm working on, and I've come across a frustrating problem concerning animating buttons which show and hide elements.
The project is a single page mobile web app with a handful of buttons on it. I'm using jQuery to set a css keyframe animation on a button when it's pressed. The button hides the current page, and shows a new one. The problem is, when I click the button, the page changes before the animation is complete, and the animation is paused whilst the container is hidden. When the container is re-shown, the animation continues from where it was hidden, then the webkitAnimationEnd event triggers.
The containers are shown and hidden with:
display: none;
I can't change this to:
visibility: hidden;
because the container will still take up space. Are there any simple ways I can force the animation to be removed when the element becomes invisible, or force the animation to continue when the container is hidden?
Edit: For clarification, this is the keyframe animation I'm applying in the javscript:
#-webkit-keyframes shrink
{
0%
{
-webkit-transform: matrix(1, 0, 0, 1, 0, 0);
}
50%
{
-webkit-transform: matrix(0.95, 0, 0, 0.95, 0, 0);
}
100%
{
-webkit-transform: matrix(1, 0, 0, 1, 0, 0);
}
}
And this is the javascript I've got to apply the animation to the element:
$('body').on(_context.settings.platformInfo.device.touch ? 'touchstart' : 'mousedown', '.shrink', function ()
{
var $item = $(this);
$item.one('webkitAnimationEnd', function ()
{
$item.css({ '-webkit-animation': 'none' });
}).css({ '-webkit-animation': 'shrink 250ms forwards' });
});
You could put the CSS definition of the animation in a separate class and add or remove this extra class based on visibiity:
#SomeDiv{ .... }
.MyAnimation{ .... }
$('#SomeDiv').addClass('MyAnimation').show();
$('#SomeDiv').hide().removeClass('MyAnimation');
You could try setting visibility: hidden; but also absolutely position the element off-screen, e.g position: absolute; left: -500px; /* Or whatever it takes */. In fact, you might not even need to set the visibility. It feels a bit hacky though.
I guess your problem could be solved if the animation for hiding the current page just waits until the button's animation is complete. So you'd have to trigger the page animation in the "on complete" callback of the button's animation:
$("#button").click(function(){
$(this).animate({
//animation parameters
}, 1000, function() {
//button animation complete, change pages
});
});
Test it here: http://jsfiddle.net/Y5HSU/
I've found a solution which will work for this particular problem, although I'm not massively fond of it. Adding a setTimeout into the mix means that even when the container is hidden, the animation will be removed after 250ms (in this case).
$('body').on(_context.settings.platformInfo.device.touch ? 'touchstart' : 'mousedown', '.shrink', function ()
{
var $item = $(this);
setTimeout(function ()
{
$item.css({ '-webkit-animation': 'none' });
}, 250);
$item.css({ '-webkit-animation': 'shrink 250ms forwards' });
});
The main problem with this is if the browser is particularly slow at executing the animation, and the timeout fires too soon cutting the animation off.
In CSS :
.hidden .myAnimation {
/* Will reset and prevent your animation
from running when the element is hidden. */
animation: none;
}

Categories

Resources