I'm trying to animate a div box for several times when a button is pressed. It shall go right, and again right, then it comes a bit down and the text inside should change, and then it shall go left, and again left to its original place. There are two problems that I need help with:
The text change doesn't occur when it should! It changes immediately after I press the button! What should I do to run the text change just AFTER the third animation?
I get the value of an input number box, and want to apply it as the
speed argument. But when I put number instead of speed, it does
not work. I have to set it manually like 2000. What is wrong here?
JavaSript Code:
$(document).ready(function(){
$("button").click(function(){
var d=$("#t");
var number=$("#number1").val();
var speed=2000;
if(state==true){
d.animate({left:'+=230px'}, speed);
d.animate({left:'+=230px'}, speed);
d.animate({top:'+=20px', backgroundColor: "#f09090", text:'12'}, speed/4);
$('#span').fadeOut(500, function() {
$(this).text('a1').fadeIn(500);
});
d.animate({left:'-=230px'}, speed);
d.animate({left:'-=230px'}, speed);
d.fadeOut();
}
});
});
You can also try this: use .when and .then
Here you go: http://jsfiddle.net/9RuTX/1/
In terms of your #2 problem. I tested it out and it seems to work fine. Have you consoled it out and see if its getting in your var number. Perhaps do a typeof on it and see what it is.
$(document).ready(function(){
$("button").click(function(){
var d=$("#t");
var number=$("#number1").val();
var speed=2000;
if(state==true){
$.when(
d.animate({left:'+=230px'}, speed),
d.animate({left:'+=230px'}, speed),
d.animate({top:'+=20px', backgroundColor: "#f09090", text:'12'}, speed/4)
).then( function(){
$('#span').fadeOut(500, function() {
$('#span').hide().text('a1').fadeIn(500);
})
}
).then( function(){
d.animate({left:'-=230px'}, speed)
d.animate({left:'-=230px'}, speed)
d.fadeOut()
}
)
}
});
});
This happens because jQuery enqueue's animations per-element, and the span is a different element. You should put the text changing code in a callback function for when the previous animation completes. Here's an example.
<script>
$(document).ready(function(){
$("button").click(function(){
var d=$("#t");
var number=$("#number1").val();
var speed=2000;
if(state==true){
d.animate({left:'+=230px'}, speed);
d.animate({left:'+=230px'}, speed);
d.animate({top:'+=20px', backgroundColor: "#f09090", text:'12'}, speed/4, "swing", function(){
$('#span').fadeOut(500, function() {
$(this).text('a1').fadeIn(500);
});
});
d.animate({left:'-=230px'}, speed);
d.animate({left:'-=230px'}, speed);
d.fadeOut();
}
});
});
</script>
If needed, you can also delay you following animation so that it will not run simultaneously with the text changing code like this.
d.delay(500).animate({left:'-=230px'}, speed);
Here is a working example based on you jsFiddle.
http://jsfiddle.net/LSegC/
Try this
d.animate({left:'+=230px'}, speed)
.animate({left:'+=230px'}, speed)
.animate({top:'+=20px', backgroundColor: "#f09090", text:'12'}, speed/4)
.queue(function(){
var q = $(this);
$('#span').fadeOut(500, function() {
$(this).text('a1').fadeIn(500, function(){ q.dequeue() });
});
})
.animate({left:'-=230px'}, speed)
.animate({left:'-=230px'}, speed)
.fadeOut();
Just add it to the animation queue and it will get executed after the previous animations are done.
Related demo: http://jsfiddle.net/DerekL/qn893/1/
Related
I just coded a menu that has an animation in javascript. The script works as it should but I don't like that if you navegate throught the items from up to down, the menu gets really buggy and the texts start to display like crazy. A possible solution is, that when the mouse enters to a list item, it has to have a certain delay for the animation to start (for example, you must have the mouse there 3 seconds, if not, nothing happens). setTimeout won't do it, because it will execute the animation anyway. I am wondering if there is a work around this, because i can't come up with any.
this is the code that does the animation:
$( '.menu li a' ).hover( function(){
var el = $(this);
var numero = el.parent().index();
el.animate({
'height': height[numero]+'px'
}, 'slow');
}, function(){
$(this).animate({
'height': 0
}, 'slow');
});
jsfiddle here
I am trying to attempt this without using css Transitions. Thank you very much!
Try to stop the previous animation queue by using .stop(),
$( '.menu li a' ).hover( function(){
var el = $(this);
var numero = el.parent().index();
el.stop().animate({
'height': height[numero]+'px'
}, 'slow');
}, function(){
$(this).stop().animate({
'height': 0
}, 'slow');
});
DEMO
I'm having a bit of a problem with Javascript. I have a list of article titles which, when you click a title, the corresponding article appears on the right hand side (fixed at the top of the page). I have got these articles to fade in/out using Javascript. I also have a function which, when you are scrolled down and click on an article title, scrolls the page slowly back up to the top.
The problem I have is that when the page scrolls up and the article changes at the same time, the animations on both become quite choppy, especially in Safari. Is there any way to make the page scroll to the top first, then make the article change?
I'm basically asking if there is away to make my Javascript functions happen one after the other, rather than at the same time?
Heres my Javascript:
$(document).ready(function () {
$('.scrollup').click(function () {
$("body").animate({
scrollTop: 0
}, 'slow');
return false;
});
$('.articlelist ul li').click(function() {
var i = $(this).index();
$('.fullarticle').fadeTo(500,0);
$('#article' + (i+1)).fadeTo(500,1);
});
});
Any help would be hugely appreciated!
Thank you
I'm guessing you want to keep the click functionality on your article list and only the elements with class scrollup have 2 animations.
$(document).ready(function () {
$('.articlelist ul li').click(function () {
var i = $(this).index();
if ($(this).is(".scrollup")) {
$("body").animate({
scrollTop: 0
}, 'slow', function () {//when animation completes
fadeArticle(i);
});
} else {
fadeArticle(i);
}
});
function fadeArticle(i) {
$('.fullarticle').fadeTo(500, 0);
$('#article' + (i + 1)).fadeTo(500, 1);
}
});
In your call to animate() you'd want to add a function to be called upon completion. The animate function provided by JQuery takes a function as an optional parameter. When the animation completes that function is called.
You could use something like this:
$('.scrollup').click(function () {
$("body").animate({
scrollTop: 0
}, 'slow', showArticle);
return false;
});
showArticle would be a call to a function that fades the article in like the anonymous one in your click listener. You would probably need some way to pass an argument about which article should be shown.
I'm relatively new to this, but I think this may work. What I'm trying to do is enclose each of these as a callable function and then pass one function as the callback to the other.
$(document).ready(function () {
scrollTop(showArticle());
});
function scrollTop(callback) {
$('.scrollup').click(function () {
$("body").animate({
scrollTop: 0
}, 'slow');
callback;
});
}
function showArticle() {
$('.articlelist ul li').click(function () {
var i = $(this).index();
$('.fullarticle').fadeTo(500, 0);
$('#article' + (i + 1)).fadeTo(500, 1);
});
}
I have the below piece of code that moves a onto the screen when ?added is in the URL which works great. I now need to add a piece of code to it that then moves the back over after 5 seconds. I have noticed there's a delay function but I'm not sure how to add it into the code. Can anyone help? Many thanks!
$(document).ready(
function () {
if (document.URL.indexOf("?added") >= 0) {
$('#popout-left-menu-container')
.animate({
'right': '2px'
}, 300);
};
});
You can use the setTimeout function to delay something in javascript. Maybe like this:
$('#popout-left-menu-container').animate({'right':'2px'},300);
setTimeout(function(){
//This is animation that runs after 5 seconds. You can use it to move the block back.
//You have to set your parameters yourself here
$('#popout-left-menu-container').animate({'right':'0px'},300);
}, 5000);
$(document).ready(
function () {
if (document.URL.indexOf("?added") >= 0) {
setTimeout(function(){
$('#popout-left-menu-container')
.animate({
right:'2px'
},300);
},5000);
};
});
You should do it with .delay().
$("query").animate(firstAnimation, firstDuration).delay(milliseconds).animate(secondAnimation, secondDuration);
I have a simple jQuery code which swaps two images by hiding one and displaying the other, I'm seeking to swap the images using a fade in fade out effect, but since the two images aren't lying on top of each other I cant simply fade the top image resulting on showing the bottom one,
I want to fade the first image then set the css display property to none then show the second image with 0 opacity and gradually set the second images opacity to 100. But when I add the code which fades the images, it doesn't work and the display none doesn't wait for the fade to finish. How can I make the functions wait for the one before to finish?
$('.thumbs').hover(
function() {
console.info('in');
$(this).children('.first').css('display','none');
$(this).children('.second').css('display','block')
},
function() {
console.info('out');
$(this).children('.second').css('display','none');
$(this).children('.first').css('display','block')
}
);
HTML Code:
<div class='thumbs'>
<div class='first'><?php the_post_thumbnail()?></div>
<div class='second'><?php MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'secondary-image');?></div>
</div>
1) delay() method allows us to delay the execution of functions that follow it in the queue.
http://api.jquery.com/delay/
$( "#foo" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );
2) use callbacks
$("#divId1").animate({opacity:.1},1000,function(){
$("#divId2").animate({opacity:.1},1000);
});
Like so:
setTimeout(function() {
console.log('out');
$(this).children('.second').css('display', 'none');
$(this).children('.first').css('display', 'block');
}, 1000);
I have not tested but this should do the job:
$('.thumbs').hover(
function(){
var $that = $(this);
$(this).children('.first').fadeOut(1000, function(){
$(this).css('display','none');
$that.children('.second').fadeIn(500);
});
}
,
function(){
var $that = $(this);
$(this).children('.second').fadeOut(1000, function(){
$(this).css('display','none');
$that.children('.first').fadeIn(500);
});
}
);
Try
$('.thumbs').hover(
function() {
var second = $(this).children('.second');
$(this).children('.first').fadeOut(1000, function(){
second.fadeIn(1000,function(){});
});
},
function() {
var first= $(this).children('.first');
$(this).children('.second').fadeOut(1000, function(){
first.fadeIn(1000,function(){});
});
}
);
Working Fiddle
I am new to JavaScript and jQuery. I have trouble in my new project. I want to need a image is bouncing. I got a script from net. But This function is only for jumping on the click.I want its jumping when the site is loaded. Please help me.
Link http://www.tycoonlabs.com/help/bouncing%20-%20Copy.html
This is my script
<SCRIPT>
$(function(){
$('#bouncy1').click(function () {
$(this).effect("bounce", { times:5 }, 300);
});
});
</SCRIPT>
Thanks and Regards
If you want to have it bounce while something is happening and then stop it, you could use setInterval
var interval = setInterval(function(){
jQuery('#someId').effect('bounce', {times: 5}, 300);
}, 500); // every half second
// Do some stuff to load up your site;
clearInterval(interval); // Stop the bounce interval
You may want to adjust the times parameter and the delay to meet your needs and effect.
Try this:
<script>
$(function(){
function bounceObject(obj)
{
obj.effect("bounce", { times:5 }, 300);
}
bounceObject($('#bouncy1'));
$('#bouncy1').click(function () {
bounceObject($(this));
});
});
</script>
this works well
function bounce(){
$('#test').effect( "bounce", "slow", bounce);
}
bounce();
http://jsfiddle.net/xGe2D/