Well I've implementes some divs and when I start the page I want them animate, they do, but the problem is that sometimes one div overlaps another one then I see a blank space... How could I avoid this? I'm doing this :
This is how I change the divs :
function swap(d1, d2){
var topaux, leftaux;
topaux = d1.css("top");
leftaux = d1.css("left");
d1.animate({
top: d2.css("top"),
left: d2.css("left"),
}, { duration: 1000, queue: false });
d2.animate({
top: topaux,
left: leftaux,
}, { duration: 1000, queue: false });
}
This is how I'm trying to do it now, but after try this, I didn't have any animation so I had this code and it worked I mean no overlaps between div's....
d1.css("top", d2.css("top"));
d1.css("left", d2.css("left"));
d2.css("top", topaux);
d2.css("left", leftaux);
I call this function (swap) when I'm shuffling the divs as follows :
function swapdivs(){
var i,r, c, d1, d2;
for (i = 1; i < 100; i++) {
r = Math.floor((Math.random() * rows) + 1);
c = Math.floor((Math.random() * columns) + 1);
d1= $("#r"+r+"c"+c);
r = Math.floor((Math.random() * rows) + 1);
c=Math.floor((Math.random() * columns) + 1);
d2 = $("#r"+r+"c"+c);
swap(d1,d2);
}
}
This is the jfiddle
What I'm missing?
Ok, now i see the problem.
In your barrejarPeces function you're scrambling randomly all elements multiple times (100)
for (i = 1; i < 100; i++) {
In the interanvipeces function you try to switch the position of 2 different elements with an animation of 1000ms, calculating their css attributes top and left
Well, the problem is when one (or both) elements are already switching position (since the barrejarPeces function will scramble 100 times without waiting any animation to finish), top and left values won't be correct.
So there are 2 possible solutions:
Don't use animation delay (try to set to 0 instead of 1000 in your fiddle and you'll see it works)
Scramble all elements just once (see my example here, where i changed some logic)
Related
I have a series of list items and I want to put every specific item in the middle of the visible region of their parent div. So the first element can scroll to the middle I added some dummy items before it. (and also to the end of list items). and this is my function:
function scrollToMiddleView(elem) {
if (elem) {
var main = $("#container");
m = main.scrollTop() + main.height() / 2;
t = main.offset().top + m;
main.animate({scrollTop: elem.offset().top - t}, 500);
}
}
I test it on a sequence of elements. It works for some elements and doesn't work for some others. I works when the scrollbar is at the top. I want each element precisely located in the middle.
This is the function that worked. the main.scrollTop() must be subtracted from main.offset().top, and then the result must be subtracted from elem.offset().top.
function scrollToMiddleView(elem) {
if (elem) {
var main = $("#container");
m = main.height() / 2;
t = main.offset().top - main.scrollTop() + m;
q = elem.offset().top - t;
main.animate({scrollTop: q}, 500);
}
}
I am writing a simple animation in javascript (I can't use css) and I don't seem to make it infinite. this is what I have so far:
myMove(ball , i, size) {
var id = setInterval(frame, 3* i);
function frame() {
if (size == 100) {
size = 0;
} else {
size++;
ball.style.width = size/10 + 'px';
ball.style.height = size/10 + 'px';
}
}
}
the ball would be the element, the i is the iterated element in a for loop in which the function is called for each element.
for (var i = 0; i < numberOfBalls; i++{
myMove(document.getElementByClassName[i]('ball'), i, 10)
}
and size is the max size I wish my element expands to.
I wish to have a smooth transition, where the 5 balls will expand in succession (so first ball after 300ms, the second, after 300ms the third and so on) and when the last ball has expanded, repeat the process. I'm really struggling to get a decent result.
Thanks for your help
I already have a function to swap the images, but they swap without any animation. Now I want a function witch swaps the images with a fading. Here is my written code for the swap function:
var header = new Array();
header[0] = "images/lan/IMG_2799.jpg";
header[1] = "images/lan/IMG_2816.jpg";
var x = 0;
function swapHeader() {
document.getElementById("header").style.backgroundImage = "url(" + header[x] + ")";
if (x < header.length - 1) x++; else x = 0;
setTimeout("swapHeader()", 5000);
}
window.onload=swapHeader;
You may want to use two elements, one per image. Then, slowly increase and decrease the opacity (a CSS property) of the one on top. The rest of your content should go above those two elements, and have a transparent background.
http://jsfiddle.net/fxLcy/ - example with setTimeout
http://jsfiddle.net/fxLcy/1/ - this is the demo without setTimeout. All elements on right place, but i really need that delayed animation =/
I want to place 6 cards per row via css transition and setTimeout. The point is, that i cant use increment for my left and top parameters inside setTimeout, because this thing just summarizes all my increments and sets elements onto final place.
var self = $(this);
if (increment % 6 === 0 && increment !== 0) {
topIncrement++;
leftIncrement = 0;
};
setTimeout(function() {
self.css({'left' : 10 + leftIncrement * (resizedWidth + 20),
'top' : $("#controlPanel").height() + 10 + topIncrement * (resizedHeight + 20)});
}, increment * 500)
leftIncrement++;
increment++;
So the issue is the variable is being shared accross the timeouts, you want to the javascript to close on each x and y position (you want each tmeout to take a snapshot of the x/y values - javascript closure).
So taking your above code and changing the setTimeout to the following I believe did the trick (please see updated fiddle)
var valuex = 10 + leftIncrement * (resizedWidth + 20);
var valuey = $("#controlPanel").height() + 10 + topIncrement * (resizedHeight + 20)
setTimeout(function() {
self.css({'left' : valuex,
'top' : valuey});
}, increment * 500)
Below is the image element that is acting as the background. The position is absolute and it also has a low z-index so it stays behind the rest of the content.
<img src="day-sky.jpg" id="background" />
The secs below just refers to seconds in a minute. This is just for test purposes, but I'd like to have one background image if the seconds is < 30 and a different one if it's greater that 30. If possible the transition would be a nice fade to the next image.
I've been searching around for ways to do this but haven't come up with a good way to do it. Any thoughts?
function changeBackground() {
if (secs > 30) {
//have one background
}
else {
//have a different background
}
}
You might want to use setInterval() function to change the background after every time stamp you define as per your requirement.
setInterval(changebackground, timeout); runs the code/function once after the timeout.
$(function() {
setInterval(function() {
var bg = ["#000","#FF0", "#909"]
var rep= Math.floor(Math.random() *3);
$("body").css("background",bg[rep])
}, 3000)
})
Here's a working example: http://jsfiddle.net/PKqGk/
var imgs = [
"http://placehold.it/1920x1080/&text=1",
"http://placehold.it/1920x1080/&text=2",
"http://placehold.it/1920x1080/&text=3",
"http://placehold.it/1920x1080/&text=4",
"http://placehold.it/1920x1080/&text=5",
"http://placehold.it/1920x1080/&text=6"
],
ind = 0,
dur = 10 * 1000; // ten seconds
(function imgSlide(){
var img = ind % 2 ? $('#imageOne') : $('#imageTwo'),
hid = ind % 2 ? $('#imageTwo') : $('#imageOne');
console.log(img, hid);
img.fadeOut("slow", function(){
hid.fadeIn("slow").css('margin-left', -hid.width()/2);
if (++ind == imgs.length) ind = 0;
img.attr('src', imgs[ind]);
setTimeout(imgSlide, dur);
});
})();