JQuery infinite image rotation - javascript

I have a row of images that are moving left or right with animate(). I am trying to make these images loop infinitely so when you click next the last image moves to the first position. Why doesn't $(this).css("left", "-320px"); work in the if statement below.
$("#right").click(function(){
$("#sliderWindow").find("img").each(function(i) {
var left = $(this).css("left");
$("#imageContainer" + i).animate({"left": "+=220px"}, "slow");
left = parseInt(left);
left += 220;
left = left + "px";
if(left === "1220px") {
//Why doesn't this work?
$(this).css("left", "-320px");
}
});
});

That code is pretty messed up. :P But I think your statement is working, if only for an instant.
I'm going to assume that the <img>s returned by find("img") are the same as your elements with ID "imageContainerN". In which case, the problem is probably that you are setting its position while it is in the middle of an animation. It probably ends up at -320px at that moment and remains there until the next animation tween which likely happens a few milliseconds later.
You could try something more like this (the important part is swapping the order of the animation and test)...
$("#right").click(function() {
$("#sliderWindow").find("img").each(function() {
if (this.offsetLeft >= 1220) {
$(this).css("left", "-320px");
}
$(this).animate({left: "+=220px"}, "slow");
});
});
Reason
Consider what happens when you set up an animation in jQuery.
1) jQuery sees you want to go +220px from current position
2) Let's say the image is currently at 100px... then jQuery says, "Okay, I'll take you from 100px to 320px over the course of, say 1 second
3) jQuery now forgets about the image's current position and just calculates where it should be to satisfy the original animation parameters on each tween
After the animation begins, you then do your if statement to reposition the element, so the following might be what happens over time...
1) Animation calculated based on parameters (current position 100px, desired position 320px)
2) After 10 millisecond, the image moves to 102.2
3) Your code executes (pretend it returned true for the current 102.2 position)
4) Your code repositions the image to -320px
5) The animation tweens again after 10ms and moves the image to 104.4px (it now appears that your image was never moved to -320px)
6) The animation tweens again and moves the image to 106.6px
7) The animation tweens again and moves the image to 108.8px
8) And so on until the image ends up at 320px
I hope that makes sense. I haven't actually looked at the jQuery animation code, but this is likely what was happening.

Related

How to done the scrollRight without animation?

I tried to scroll the div tag in the right side but this is not worked. But the scroll left function and scroll right with animation is perfectly works. But i want to scroll right without animation I tried code something like this
$().ready(function(){
$("#container").scrollLeft(500); //This works
return hus;
});
function hus(){
$("#container").scrollLeft(-200); //This is not work
}
But i want to scroll the right side without animation how can i do it?
I am not sure what you mean about "scroll right".
$("#container").scrollLeft(500)
scroll the div to the x-position of 500px (This works)
$("#container").scrollLeft(-200) scroll the div to the x-position of -200px, this is not a valid position since the minimum value is 0px, this is the left-most position, and you can't expect that it will "float" to the right side like a circle loop
scrollLeft: leftPos - 800 doesn't "scroll right" as you thing, it scroll the div element to the left, too
So, as I guest, there are 2 posible case that match your problem
Let's begin with:
var leftPos = $('#container').scrollLeft();
We suppose that:
leftPos = 1000, this is current x-position of the div
scrollWidth = 10000, obtain from $('#container')[0].scrollWidth
width = 500, obtain from $('#container').width()
If you want to move 200px to the right from current position, that is 1200, you can use:
$("#container").scrollLeft(leftPos + 200);
If you want to move to the right position that is "200px away" from the right side, that is 10000-500-200, you can use:
$("#container").scrollLeft(scrollWidth - width - 200);
Hope this can solve your problem. (Sorry, my grammar is not very well)
You can set a duration of 0 or 1 ms which would do the trick:
var leftPos = $('#container').scrollLeft();
$("#container").animate({
scrollLeft: leftPos - 800
}, 0);
An element is set to the left side by defaults. In this sense, there's no way you can scroll the element "in the right side" (a.k.a. to the left) at the very beginning.
In your case:
1. $("#container").scrollLeft(500); //This works
This would work because you just move the element to the right side for 500px.
2. $("#container").scrollLeft(-200); //This is not work
This would not work since you are already on the left-most side, you are not able to scroll an element out of the outer box.
3. var leftPos = $('#container').scrollLeft();
$("#container").animate({
scrollLeft: leftPos - 800
}, 500);
});
I am not sure what do you mean by "work perfectly" in this case, due to the lack of the context.
If what you want is to move the element "to the left" without animation, you may simply set $('#container').scrollLeft('200');
(since you already set the element to scroll to right for 500px at the very beginning.)
You may check on jsFiddle for the example. If you want to turn off the animation effect, you can just set the duration to 0.

Moving image down screen with Javascript

I would like to move my image down the screen from the top left to the bottom left. I call two functions when the body loads:
window.onload = function() {
MoveRight();
MoveDown();
};
I then retreive the width and height of the clients browser window (to ensure the animation stops when it reaches the sides of the window):
document.body.style.height = height;
document.body.style.width = width;
The function "MoveDown()" is this:
function MoveDown(){
for(var i = 0; i < ; i++)
{
document.getElementById("Amanda").style.top=+i;
}
}
For some reason when I load the webpage, the image just sits in the top left. I had hoped the for loop would increment the "top" value by 1px every time, until such time that it was touching the bottom of the window when it would stop.
If it helps, the image position is set to relative with left and top both set to 0px.
If anyone could help it would be great.
*I collect the width as I want the image to move diagonally but figured that if I got moving down figured out I could easily change the code to make it go sideways at the same time.
The reason it's not moving is most likely (depending on browser) because you're not setting the units. Try
document.getElementById("Amanda").style.top=i+"px";
However, you'll find that it jumps straight down rather than animating. The reason is your loop executes all in one go without giving the browser a chance to redraw. There are a number of ways of getting around this, but one simple one would be like this
function MoveDown() {
var i=0;
function step() {
document.getElementById("Amanda").style.top=i+"px";
i++;
if (i<=100) setTimeout(step,10);
}
step();
}
Do you have position: absolute or position: relative (or position: fixed) as styling for your image?
Asking this because top applies only to positioned elements (and by default elements have position: static which is they are not explicitly positioned).
See https://developer.mozilla.org/en-US/docs/Web/CSS/top and https://developer.mozilla.org/en-US/docs/Web/CSS/position
On rereading your question, this loop of yours looks like an endless loop. Consider adding a stop rule for it, or as suggested in the comments - if you do not need some kind of sliding animation, just put css rule for bottom: 0
You'll want to use setTimeout or setInterval (I can never remember) with some interval and a function that increments the top value every time it runs. Then cancel the timeout/interval when the image reaches it's destination!

jQuery animated divs continue to move after animation is complete

I'm animating one circle which scales, collides with two circles nearby it, and causes those circles to be animated to a certain position. Everything works, except when those two circles are animated to their post-collision position they continue to move. If you run my fiddle you'll notice that afterwards the two circles which collide with the bigger circle will actually continue to inch very slowly away from the circle well after the animation is complete. I tried .stop(true,true) on the animate function for the middle circle, called 'boss', but that only makes it so the middle circle isn't shown to grow. I tried .finish() on the boss growth animation but that doesn't help the other circles which continue to inch away well after the animation is complete.
FIDDLE: http://jsfiddle.net/direlelephant/fMLKZ/2/
EDIT: This is true whether I set the position of the divs to fixed or to absolute.
EDIT: I also tried .clearQueue() and .stop(true, false) and stop(true). ClearQueue() did nothing to help the problem, stop(true,false) prevented the middle circle from animating, as did stop(true).
The problem is: you create animations within loop. Replace part of your code with
if ( distanceformula( xcoord3, xboss, ycoord3, yboss ) < ((boss.outerWidth() / 2) + (objectify3.outerWidth() / 2)) ) {
console.log(1)
$( objectify3 ).animate( {
left: xmove3 + "px",
top: ymove3 + "px"
}, {
duration:3000,
step: function() {
console.log(2)
}
});
}
and open console.
You will see, that you created ~1000 animations (console.log(1) executes 1000 times) $( objectify3 ).animate, and then jQuery run 1000 animations one after one. They will end in ~1000 * 3000 seconds.
I think you need a flag and run animations only once with first intersection.

Why does .animate to scrollTop jump to 0 before animating?

I am playing with Parallax scrolling like on that nike site. So I have been using scrollTop to determine the user's vertical position on the page and then I've been adjusting element's positions based on the changes to that value.
Here I round the scrollTop value and log it. I'll show the log later.
var distance = 60*(Math.round($(window).scrollTop()/60));
console.log(distance);
Then, on click, I call this function which scrolls to the scrollTop value that I've passed it.
function goTo(n){
console.log('begin animating');
$('html,body').animate({scrollTop: n},2000);
}
Here's the problem, the scroll top value jumps to 0 before animating.
So I'll be halfway down the page and it logs:
begin animating
0
6240
6180
6120
// etc...
The way I'm positioning stuff relies on the accuracy of the scrollTop value. So my question is:
How can I keep the scrollTop value from jumping to 0 before going through with the animation?
Let me know if theres any more info needed.
Heres the live version of the site: http://theblueeyeguy.com/moon/Illumination/
(click 'Next' then 'Prev' to break it)
Probably because you're using a link with href="#".
Add return false; to your onclick attribute.
< Prev |

Scrolling div within bounds

I have div with images inside it and need to scroll it left and right. I,ve managed to get the scrolling to work, but now I need it to stay in the displayable area.
I need to use jQuery
$('#next').click(function() {
$('#slides').animate({left: '-=80',}, 2000, function() {});
});
$('#prev').click(function() {
$('#slides').animate({left: '+=80',}, 2000, function() {});
});
The two "buttons" is used to scroll.
How do I get the slides' position.left to stay between 0 and -1120 ?
This will be the bottom of my slideshow. The large images will be at the top.
How do I change the z-index of a div ?
You change the z-index using css:
div.class {
z-index: 60;
}
You should get the width of your displayable area then by making use of the width() method.
If you have the maximum width you can use you can easily implement a check before your animation. So if the new width (current - 80) is bigger than 0, fine ... animate it. If not, don't.
Same for scrolling to the right. If it's bigger than your displayable area's width, then don't scroll.
EDIT
You changed your question slightly, so to get the current left value you can check it with:
$('#element').offset().left
This returns the current integer value of your left attribute. Thus again you can verify its current value and compare it with the one that it'd be like after you animated it. If it's too big or too small, don't scroll.
You can check the css left value is in the interval:
if(parseInt($('#slides').css('left')) > -1120 && parseInt($('#slides').css('left')) < 0){
....//animate here
}

Categories

Resources