Slide in images - JQuery - javascript

I am trying to make 7 of my "cards" img(s) slide in from the left to the center of the screen like they are now. I tried using:
function FetchCards() {
$("#pack").css('margin-left', 0);
$("#pack").css('margin-right', 0);
$("#pack").animate({
left: '-1000px'
}, 'slow');
};
setTimeout(FetchCards, 7000);
But it's not working, not sure where I should declare the function "FetchCards", etc. Please help. Here is my current code:
http://plnkr.co/edit/L4wgzTDcV86tZK1eE23D?p=info
What I'm asking is where do I declare the function "FetchCards" and would my code work for making the images invisible until they slide in?

Try this:
function FetchCards() {
$("#pack").css('margin-left', 0);
$("#pack").css('margin-right', 0);
$("#pack").animate({
'margin-left': '-1000px'
}, 'slow');
}
setTimeout(function(){FetchCards();}, 7000);

see my example and tell me if it look like what you needed...
EXAMPLE HERE: http://jsfiddle.net/CAqE4/
JS:
function FetchCards() {
$("#pack").css({
'margin-left': 0,
'margin-right': 0
}).animate({
left: '-=1000px' // -= subtracts the number of pixel
},function(){
//this function will be called after #pack animate
$(/*IMAGE SELECTOR*/).fadeIn(); //insert the image selector
});
};
setTimeout(FetchCards, 7000);
CSS:
Your image must have display:none in css.

Related

javascript, animate and fadeout together

I need to animate an image and fade it out at the same time.
The image is situated in the right of the page, I need to move it to the left and fade it out so that when it reaches the left it is totally disappeared. I tried to combine .fadeOut and .animate (see example below) but actually the image moves, stops and then fadeout. Can you help me?
<script>
$("#link").click(function() {
$("#image").animate({
marginLeft: "-1000px"
}, 1500).fadeOut(1600);
});
</script>
Thank you
Change the opacity of the element. By settings this to zero, the element will fadeout to the duration of the animation.
Code:
$('#link').click(function() {
$('#image').animate({
marginLeft: '-100px',
opacity: 0
}, 1500);
});
Example: http://jsfiddle.net/QqfLL/
Set opacity of #image to 0 and try this :
$("#link").click(function() {
$("#image").animate({
marginLeft: "-1000px",
opacity: 1
}, 1500);
});
You will have to check if this work correctly in IE.

how to stop animation once max width is reached

I am working to make a slider that moves continuously while the users mouse is positioned over the arrow. It works but it keeps moving even when the content has ended.
How can I make it stop so that the forward/back motion is disabled once all the slides have been viewed, or so that they can't go backwards when they are viewing the first slide?
My code is below - open to other methods to achieve this type of slider if what I have is bad.
$(document).ready(function() {
var timer;
$("#leftarrow").hover(function() {
timer = setInterval(function() {slideLeft();}, 50);
}, function() {
clearInterval(timer);
});
$("#rightarrow").hover(function() {
timer = setInterval(function() {slideRight();}, 50);
}, function() {
clearInterval(timer);
});
function slideLeft() {
$("img#background").stop().animate({
'left': '-=200px'
}, 50);
$(".mid").stop().animate({
'left': '-=20px'
}, 50);
console.log('alert');
}
function slideRight() {
$("img#background").stop().animate({
'left': '-=200px'
}, 50);
$(".mid").stop().animate({
'left': '+=20px'
}, 50);
}
});
Here is a fiddle with my slider: http://jsfiddle.net/rYYDv/
You can use an additional if:
For slide left:
if(($(".mid").position().left) >= -500){ .. }
For slide right:
if(($(".mid").position().left) <= -10){ .. }
Disadvantage: You have to take care of the correct values manually. Which is not a problem, if the pictures don't change very often.
You should probably also add an additional else to ensure a correct final position (for the animate left property). But i think you get the idea.
http://jsfiddle.net/rYYDv/2/
I do not have enough points to comment on this post; hence, I'm writing it down here -
Similar post: How to make the Animate jQuery method stop at end of div?

Animate or scale from center

Any ideas on how to animate the width and height of a div from the top center?
Tried using effect('scale') but this is based on a show/hide so snaps back after completion.
Then tried a normal animate:
$('.box').animate({'width':200px,'height':200px,margin-left:-100px});
This works, but as there is a line of .box, I want the others to react and push to one side.
Fine Tuned
FIDDLE
$('.day').hover(function() {
if($(this).index()==0){
$(this).animate({'width':400,'height':400}, 500);
}else{
$(this).animate({'width':400,'height':400}, 500);
$(this).parent().stop().animate({'margin-left':'-100'} , 500);
}
}, function() {
$(this).animate({'width':200,'height':200}, 500);
$(this).parent().stop().animate({'margin-left':'0'}, 500);
});
Maybe like this:
$('.day').hover(function() {
$(this).animate({'width':400,'height':400, 'margin':'-100px -90px'});
}, function() {
$(this).animate({'width':200,'height':200, 'margin': '0 10px'});
});
Fiddle: http://jsfiddle.net/dmYY3/3/ ?

Moving a blinking image from left to right jquery

I am working on a project where I am assigned a task to make a blink image moving on the web page from the left to the right.
The image should move(step up) and blink each second.
I know how to make it blink, my code is below:
function blink(time, interval){
var timer = window.setInterval(function(){
$("#img").css("opacity", "0.1");
window.setTimeout(function(){
$("#img").css("opacity", "1");
}, 100);
}, interval);
window.setTimeout(function(){clearInterval(timer);}, time);
}
blink(5000, 1000);
But I don't know how to move it on a second basis and at the same time blink it.
Please, help me guys!
Thanks
how about using jquery animate?
$("#img").animate({marginLeft:'500px'},1000);
Here's a demo that is using only the power of the animate function :
http://jsfiddle.net/vtZd5/
try this:
function blink() {
$('div').fadeTo(1000, 0.1, function(){
$(this).animate({opacity: '1', top: '+=20px'}, 500);
blink()
})
}
blink()
http://jsfiddle.net/AJSk3/3/

How to track element movement and trigger function at specific spot?

I have a #ball that when clicked uses jquery animate to move down 210px using this code:
$('#ball').click(function() {
$(this).animate({
top: '+=210px'
}, 500);
setTimeout(crack, 400);
});​
currently Im using Timeout to trigger the next function which is "crack".
Instead I want to track the movement of #ball and when its css top = 210px I want to trigger the function crack(), how can I do this?
I saw in a somewhat similar post that the Step function might be what I'm looking for, but I am not sure how to approach that solution based on the info provided at http://api.jquery.com/animate/
Look at Demo: http://jsfiddle.net/EnigmaMaster/hbvev/4/
I am not sure why you want to use a tracker if you know that the ball will reach the box in 210px.
If you want to get rid of setTimeout, then use the .animate callback function which will be called when the ball reaches the box.
$('#ball').click(function() {
$(this).animate({
top: '+=210px'
}, 500, crack); //<== crack will be called after ball animation
});​
DEMO
Incase if you want to call crack when the ball touches the box and still continue the movement of box then you can execute it 2 steps like below,
$('#ball').click(function() {
$(this).animate({
top: '+=180px'
}, 400, function() {
crack();
$(this).animate({
top: '+=30px'
}, 100);
});
});
Also check this version for fun in slow motion http://jsfiddle.net/skram/hbvev/8/
If you truly want to do something based on the position of the ball, then yes, step is probably the best way to go:
$('#ball').click(function() {
$(this).animate({
top: '+=210px'
}, {
duration: 500,
step: function() {
if($(this).offset().top > 208) {
crack();
}
}
});
});
Demo: http://jsfiddle.net/qJjnN/1/
Now, there are a couple of caveats:
There will be a possible performance hit.
The position at each step will not necessarily be a whole number, and the object will not exist at every pixel between the start and stop location.
step is not called on the final position, so you cannot actually check for 210 if it is the final location.
Taking those into mind, you will not be able to check for the exact position of 210px. Instead, you will want to watch when it passes a certain position and only trigger crack at that point and not every point after:
$('#ball').click(function() {
var cracked = false;
$(this).animate({
top: '+=210px'
}, {
duration: 500,
step: function() {
if($(this).offset().top > 208 && !cracked) {
cracked = true;
crack();
}
}
});
});
Demo: http://jsfiddle.net/qJjnN/2/
The step function also has parameters now and fx that can be used to see the current value of the css being animated. step is called for each step of each css attribute being animated. So, you have to be careful using those, because you need to look at fx to see what attribute value you are looking at (if you are animating more than one, i.e. top and left).
$('#ball').click(function() {
var cracked = false;
$(this).animate({
top: '+=210px'
}, {
duration: 500,
step: function(now, fx) {
if(fx.prop != 'top') {
return;
}
if(now > 208 && !cracked) {
cracked = true;
crack();
}
}
});
});

Categories