jquery fading in on screen after time - javascript

Hi guys iam trying to figure out how i can get an image to appear onto the screen after a certain amount of time , after the animation has started.
So i got an image and i have used css to place it where i want it to be.
#laser
{
position: absolute;
left: 650px;
}
Dose anyone know how i can possibly get that image not to appear when the animation starts but to appear after 3 seconds in that certain place where i have used css to place it?
Edit: This is the code i got so far.
<div id="laser">
<img src="images/laser.png" alt="laser">
</div>
#laser
{
position: absolute;
left: 650px;
display: none;
}
Then i just used the code that you gave me. But it just stop everything else from working.
$('#laser').animate({
width: '100px',
height: '100px'
}, 3000, function() {
$(this).show('slow');
});​
Link to my code if u want to look at it: http://jsfiddle.net/wdy5P/5/

Use the .animate() method.. After the specified duration the code in the callback will be executed..
$('#laser').animate({
width: '100px',
height: '100px'
}, 3000, function() {
$(this).show('slow');
});​
Check Fiddle

Adding a single millisecond to show() makes it an animation (invisible to the eye but added to the FX queue), and in turn lets you use the delay() function to delay the image being shown by 3000 milliseconds (3 seconds):
$('#laser').delay(3000).show(1);
The image would of course have to be initially display: none;

Related

Using Jquery, how do I find pixel value of a property's percentage and add it to a different property?

I'm new to jquery and I'm having some trouble with it.
.pageimage {
width:80%;
height:60%;
margin:0 auto;
background:#0FF;
position:absolute;
left:;
top:20%;
}
Using jquery, I'm trying to find the pixel value of 'top', subtract 50% from that value, and then place that value on the 'left' property.
Also, does anyone know how to rerun this script after the browser window has been resized?
Help is greatly appreciated.
You can easily do this, using the .css() method creatively. If you get the .css("top") of an element, it is returned in px, so you have to replace("px","") to be able to use the numeric value, then divide by 2, then add the "px" at the end again.
Wrap this up in a function and call it when your page loads. Then add a $window.resize() handler to run the function every time the window is resized after it's loaded.
Here's a full example:
function updatePageImageLeft() {
var calculatedLeft = $(".pageimage").css("top").replace("px", "") / 2 + "px";
// console.log(calculatedLeft);
$(".pageimage").css("left", calculatedLeft);
}
// Called when the page loads
updatePageImageLeft();
// Page has been resized, call it again
$(window).resize(function() {
updatePageImageLeft();
});
.pageimage {
width: 80%;
height: 60%;
margin: 0 auto;
background: #0FF;
position: absolute;
/*left: ;*/
top: 20%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pageimage"></div>
Note: You might also want looking into the CSS calc() function, as it could help you avoid writing any Javascript/jQuery code in the first place (especially if you combine it with CSS custom properties).
To get the Value of "top" you can youse the function css.
var top = $(".pageimage").css("top");
$(".pageimage").css("left",parseInt(top)* 0.5);
to rerun the script after the window has been resized use:
$(window).resize(function() {
//place Code here
}
Link to jsfiddle
Edit
use parseInt to get the int-Value of top

Animate div using jQuery and changing the Width

I'm trying to slide in a div into the page while the page is loaded completely, I used CSS before, but it wasn't smooth at all, so i switched to use jQuery.
It's very smooth but i have a small issue which i believe somebody with more experience could solve it very quickly.
If you look at my output, the effect is not very seamless and it seems it stuck at some point.
Because i'm animating the div within change the width, i'm sure there is a better way to do that.
Here is my code :
$(document).ready(function() {
$("#thumbnails").animate({
opacity: 1,
width: "800px",
}, {
duration: 500,
specialEasing: {
width: "linear"
}
});
});
Here is the Output link
http://jsbin.com/cuvaxuji/1
Are you trying to slide the div ... for sliding make "#thumbnails" position absolute and write
$("#thumbnails").animate({
opacity: 1,
left: "20px",
}

Slide image with easing

The idea is to have images that appear on the page in a sliding way (sliding into place) and that part I managed to make.
What I don't seem to be able to achieve is to add some kind of easing to them - for example the image should go faster in the beginning and slow down right before reaching its destination.
I have the first part working on my website, but in the fiddle I created nothing works - anyway, this is it: http://jsfiddle.net/Sf5jC/ :
HTML:
<div id="click-me">
<div id="square"></div>
</div>
CSS:
#click-me {
width: 1000px;
height: 1000px;
}
#square {
position: relative;
left: 300px;
height: 100px;
width: 100px;
background-color: orange;
}
JS:
$('#click-me').click(function (e) {
e.preventDefault();
$('#square').animate({
left: 0
}, 500);
});
Could somebody please give me a suggestion? I'm quite a newbie in jQuery.
In fiddle nothing works because you did not select any library for it to work
Take a look at fiddle now Fiddle
And how about something like this to slow down
Fiddle
$('#click-me').click(function (e) {
e.preventDefault();
$('#square').animate({
left: 100
}, 500);
$('#square').animate({
left: 0
}, 1500);
});
As the commenter pointed out - you're missing jQuery from the fiddle which is why it doesn't work.
jQuery comes with 2 different easing options out of the box, swing (the default) and linear which as the name suggests is constant.
However, there's a really good library for different easing options that you can plug in - there's a link here and you can try out the different kinds on the page. Download it, include it in your website (after jQuery) and you can use the different easing methods.
To use easing in your code just add the type of easing after the duration. E.g.
$("#element").animate({"left":0},1000,"easingName");

Using SuperScrollorama to drop image in from top of page

I'm using SuperScrollorama to trigger a lot of animations on a single page (scrolling) website. All of the images and text that slide in from the left or right work perfectly. The problem is when I try to make an image drop in from the top of the screen the image will bounce up and down the whole time the user scrolls until they finally get down to the point where the image is supposed to "sit" (It basically goes back to it's original position and then down to where it's supposed to stay and then back up again and so on)... Here's my relevant code:
HTML:
<div id="about-pin-div">
<div id="pin-frame-pin" class="pin-frame"><img src="img/about-products.png" style="width: 55%;"></div>
</div>
CSS:
#about-pin-div { position: relative; width: 100%; height: 100%; left: -5%; overflow: hidden; }
.pin-frame { position: absolute; width: 100%; height: 100%; overflow: hidden; }
.pin-frame img { margin-top: -200px; }
JAVASCRIPT:
$(document).ready(function() {
var controller = $.superscrollorama();
controller.addTween('#about-pin-div', TweenMax.from( $('#about-pin-div'), .5, {css:{bottom:'1000px'}, ease:Quad.easeInOut}), 0, 600);
// set duration, in pixels scrolled, for pinned element
var pinDur = 1000;
// create animation timeline for pinned element
var pinAnimations = new TimelineLite();
pinAnimations
.append(TweenMax.from($('#pin-frame-pin img'), .5, {css:{marginTop:80}}))
// pin element, use onPin and onUnpin to adjust the height of the element
controller.pin($('#about-pin-div'), pinDur, {
anim:pinAnimations,
onPin: function() {
$('#about-pin-div').css('height','100%');
},
onUnpin: function() {
$('#about-pin-div').css('height','100%');
}
});
});
Thanks in advance for any help!
I think you are having a number of issues here and I will try to point out some problems that I have had with this plugin.
(1) When in doubt turn off pushFollowers for your pins.
In an effort not to continue to repeat myself
Play through pinned elements in superscrollorama
janpaepke did an excellent job in writing this work around because he had the same issues himself.
(2) Never use margins for adjusting the position, IE handles margins badly sometimes depending on the context won't work the way you want it to.
When to use margin vs padding in CSS
Does a better job at explaining it then I can.
(3) I don't understand the need to trigger on pin functions to adjust the height of #about-pin-div. You are just resetting the starting value over and over that I don't see ever gets changed. Unless you were trying to compensate for the automatically adjusting of pinned elements but the work around in (1) should fix that.

changing element.style on the finishing position of a jQuery animated div

I am using a photo album jQuery plugin (Supersized). It includes a thumbnail tray which slides up from the bottom of the screen at the touch of a button, resulting in the following HTML being created onto the div properties and in firebug css 'element.style. property:
style="display: block; bottom: -150px;"
and when caller clicked:
style="display: block; bottom: 0px;"
I am trying to place a footer div at the bottom of the page though, so want to move the finishing position to 'bottom:0px'. I have seen that an extra element.style can be added to local CSS but without a 'before' and 'after' type of selection I don't understand if that can help me. Furthermore I don't find the function in the JS files and from what I understand it can't be accessed anyway. I need to change these to be:
style="display: block; bottom: -150px;"
and when caller clicked:
style="display: block; bottom: 42px;"
Any advice would be most welcome. Thanks
$('#clickedElement').on('click', function() {
$('#element').css('bottom', '42px')
});
If i didn't missunderstand you?
Probably the function which you can not find is jquery .css() function you can read how it works here.
Also if you want to animate some dive you can use jquery .animate() function (docs).
In your case it should looks like:
$('#button').click(function() {
$('#element').animate({
$('#element').css('bottom', '42px');
}, 5000, function() {
});
});
Where 5000 it's time of your animation in miliseconds.

Categories

Resources