In my game I am going to add obstaceles that move left to right across the <div id="outline"></div>
I've used setInterval(){...} with the .animate() In it, and it seems to work only issue is after a little bit of time it leaves the ouline, Below is some code and a link.
$(document).ready(function() {
setInterval(function(){
$("#CObject").animate({
'marginLeft' : "+=220px" //moves left
}, 900);
}, 900);
setInterval(function(){
$("#CObject").animate({
'marginLeft' : "-=220px" //moves left
}, 900);
}, 1000);
});
Link.
change to this on your "-=220px":
setInterval(function(){
$("#CObject").animate({
'marginLeft' : "-=220px" //moves left
}, 900);
}, 900);
to match 900 time interval, it's offset by 100.
If you want to know. There's another way do what you want without use setInterval, in this case you have to wait the animation ends in order to start the reverse animation.
$(document).ready(function() {
animate(false);
});
function animate(reverse) {
$("#CObject").animate({
'marginLeft' : (reverse) ? "-=220px" : "+=220px" //moves left
}, 900, function() {
// Run when animation finishes
animate(!reverse);
});
}
This way you can be sure that animation will finish before start anything else
Without setInterval:
$(document).ready(function() {
function loop() {
$("#CObject").animate({
'marginLeft' : "+=220px" //moves left
}, 900, 'linear', function() {
loop();
});
$("#CObject").animate({
'marginLeft' : "-=220px" //moves left
}, 900, 'linear', function() {
loop();
});
}
loop();
});
fiddle
create a loop function with the animation and then just call it when the animation finishes.
To ensure that the animation is complete, I would just have each direction animation call the other one when it completes. If you look at the API for animate, you'll see the fourth parameter is for a function that will be called when the animation is finished. http://api.jquery.com/animate/
$(document).ready(function() {
animateRight();
});
function animateRight() {
$("#CObject").animate({
'marginLeft' : "+=220px" //moves left
}, 900, 'swing', animateLeft);
}
function animateLeft() {
$("#CObject").animate({
'marginLeft' : "-=220px" //moves right
}, 900, 'swing', animateRight);
}
Here is the fiddle: http://jsfiddle.net/cgdtfxxu/
Related
a couple of people kindly helped me yesterday with a jQuery issue on a scrollTop function but I now have another small issue. Below is the fiddle for the js. I need to get the js to bounce the content back to the top instead of scrolling back up to the top.
Here is the JS, fiddle below it.
function scroll(speed) {
$('.shooter-scroller').animate({
scrollTop: $('.shooter-scroller').prop('scrollHeight'),
easing: 'linear'
}, {
duration: speed,
easing: 'linear', // <--- here
complete: function () {
$(this).animate({
scrollTop: 0
}, {
duration: speed,
easing: 'linear', // <--- here
complete: speed
});
}
});
}
speed = 8000;
scroll(speed)
setInterval(function () {
scroll(speed)
}, speed * 2);
});
fiddle
I need the speed to remain as linear but the scroll to reset to the top once it gets to the bottom. Any help would be amazing! Thanks in advance people :)
Here is an updated fiddle: http://jsfiddle.net/tsb5pj49/4/
Instead of animating it back to the top, you can just set the scrollTop to 0 using the same function. Additionally, if you store the setInterval in a variable then you can clear it and start it again when the animation completes and the scrollTop is reset. Like so:
// When DOM is fully loaded
jQuery(document).ready(function ($) {
var speed = 8000,
scrollInterval;
function scroll(speed) {
$('.shooter-scroller').animate({
scrollTop: $('.shooter-scroller').prop('scrollHeight'),
easing: 'linear'
}, {
duration: speed,
easing: 'linear', // <--- here
complete: onScrollingComplete
});
}
function startScrolling() {
scroll( speed );
scrollInterval = setInterval(function () {
scroll(speed)
}, speed * 2);
}
function onScrollingComplete() {
$( this ).scrollTop( 0 );
clearInterval( scrollInterval );
startScrolling();
}
startScrolling();
});
Hope this helps
function animatethis(targetElement, speed) {
$(targetElement).animate({
marginLeft: "+=250px"
}, {
duration: speed,
complete: function () {
targetElement.animate({
marginLeft: "-=250px"
}, {
duration: speed,
complete: function () {
animatethis(targetElement, speed);
}
});
}
});
};
animatethis($('#q1'), 1000);
I need a button where you press it, and the loop will go once. Just like an attack animation, where I press a button and the image will attack an other image.
Here you go man.... let me know if you have any questions!
Working Example
// Animation Function
function animatethis(targetElement, speed) {
$(targetElement).animate({"margin-left" : "+=50px"}, speed, function(speed){
$(this).animate({"margin-left" : "-=50px"}, speed);
});
};
//Animation Trigger
$('body').on('click', 'button', function(){
animatethis('#q1', 250);
});
I'm using the following code to animate a div class arrow;
function animUp() {
$(".arrow").animate({
top: "0"
}, "slow", "swing", animDown);
}
function animDown() {
$(".arrow").animate({
top: "40px"
}, "slow", "swing", animUp);
}
$(document).ready(function() {
animUp();
});
Which works great and animates the arrow as intended. I've then added the class 'arrow' to another div with an arrow in to animate and they both stop animate down, long pause, animate up, long pause, animate down etc. Rather than the smooth animation of one arrow.
I've also tried having arrow and arrow2 and combining them in the script like this;
function animUp() {
$(".arrow, .arrow2").animate({
top: "0"
}, "slow", "swing", animDown);
}
function animDown() {
$(".arrow, .arrow2").animate({
top: "40px"
}, "slow", "swing", animUp);
}
$(document).ready(function() {
animUp();
});
With the same result as above. What else can I try to get them both animating smoothly?
jsFiddle - My html structure is using bootstrap
animations are added to a queue by default in jQuery to avoid queueing you should do the following:
function animUp() {
$(".arrow, .arrow2").animate({
top: "0"
}, {
duration: "slow",
queue: false,
easing: "swing",
complete: animDown
});
}
function animDown() {
$(".arrow, .arrow2").animate({
top: "40px"
}, {
duration: "slow",
queue: false,
easing: "swing",
complete: animDown
});
}
notice how instead of just passing in "slow" we now use an object
the following is from the jQuery site :: http://api.jquery.com/animate/
queue (default: true)
Type: Boolean or String
A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately. As of jQuery 1.7, the queue option can also accept a string, in which case the animation is added to the queue represented by that string. When a custom queue name is used the animation does not automatically start; you must call .dequeue("queuename") to start it.
I've seen something like this in Java and I'm wondering if it's there something similar in JavaScript/jQuery. Basically I have a function with an animation and a code that runs at the end of it:
$('html,body').animate({ scrollTop: 0 }, 'slow', function(){
lastScrollTop = $(this).scrollTop();
});
However, I want this code to be updated during the animation e.g.: if the user is 500px, I want lastScrollTop to become 450,400,300,200,100,50,0
Is there a way to keep my variable updated during the animation?
You should look into using step or progress of the animate method:
$('body').animate({ scrollTop: 0 }, {
duration: 'slow',
step: function(now, fx) {
lastScrollTop = now; //Get the current scroll amount.
},
complete: function() {
lastScrollTop = $(this).scrollTop();
}
});
now: the numeric value of the property being animated at each step
fx: a reference to the jQuery.fx prototype object, which contains a number of properties such as elem for the animated element, start and end for the first and last value of the animated property, respectively, and prop for the property being animated.
Use step if you want to get the value before the animation happens, and use progress if you want the value after it happens. Something like this:
$('html,body').animate(
{scrollTop: 0},
{
'slow',
step: function(currentTop){
console.log (currentTop)
}
},
function(){
lastScrollTop = $(this).scrollTop();
}
);
I am jQuery beginner :) I am trying to move from left to right but all I did is moving to the right. How to move it back?
$(function () {
$('#box').click(function () {
$(this).animate({
"left" : "300px"
}, 4000);
});
});
Also I have update panel on my page with left right button that do some things in code behind. How to call this left/right function from code behind?
To move it back to the left you just append another animate:
$(function () {
$('#box').click(function () {
$(this).animate({
"left" : "300px"
}, 4000).animate({
"left" : "0px"
}, 4000);
});
});
This is an anonymous function as event handler you can't call, it will only run on the click events on the div. You could move it outside
$(function () {
$('#box').click(boxAnimation);
});
function boxAnimation() {
$(this).animate({
"left" : "300px"
}, 4000).animate({
"left" : "0px"
}, 4000);
}
and then maybe this will help.
EDIT:
I found an article describing how you can call javascript from the code-behind.
Hope it helps