Develop Reference

jQuery animate - finish animation unless it's fired again

I am making a game like freaking-math using Phonegap and javascript.
I need to create similar timebar at the top. I use jQuery animate to animate the bar ... it works with the first answer only well .. then the second answer it starts but not exactly when the button is fired ..
how can I make it start just when the button fired and end too when it's fired again and end also after 3000ms if no answer were choosen ! ?
(function timeBar() {
$('.answer').on('touchstart', function(){
$('.progress').animate({ width: '0%' }, 3000)
$('.progress').animate({ width: '100%' }, 0);
});
})();
I have tried :
(function timeBar() {
$('.answer').on('touchstart', function(){
$('.progress').animate({ width: '0%' }, 3000);
});
$('.answer').on('touchend', function(){
$('.progress').animate({ width: '100%' }, 0);
});
})();
But not working :( !!

Here's one solution, given that you reload the page for every new math-question:
http://jsfiddle.net/daxro/uLd49zmp/1/
$(document).ready(function() {
$("#bar").animate({
width: '0%'
}, 3000);
});
...and here's another solution which includes a button: http://jsfiddle.net/daxro/uLd49zmp/3/

How to start sound using picture in javascript

Hi I'm currently stuck on a problem
I have a picture where i want it to animate as well as start a sound clip. So far, the picture gets animated, but the music won't start.
This is my javascript:
$(document).ready(function() {
$(document).ready(function() {
$("img").click(function() {
$(this).animate({
height: '150px',
width: '150px'
});
function play_single_sound() {
document.getElementById('audiotag1').play();
};
});
});
});
This is my index.html where info about my audio ID is:
<audio id="audiotag1" src="tailtoddle_lo.mp3" preload="auto"></audio>

Assuming your jQuery is set up correctly, you likely want the following
remove the nested document.ready
actually call the function inside the click
Like this
$(function(){
// tilknyt klik-funktion til alle IMG tags
$("img").click(function(){
$('#audiotag1').play();
$(this).animate({
height: '150px',
width: '150px'
});
});
});
or this
function play_single_sound() {
document.getElementById('audiotag1').play();
}
$(function(){
// tilknyt klik-funktion til alle IMG tags
$("img").click(function(){
play_single_sound();
$(this).animate({
height: '150px',
width: '150px'
});
});
});

You need to call the function play_single_sound in img click handler as of now you are only defining the function. Also you only need to use one document-ready handler.
play_single_sound();
Complete Code
$(document).ready(function() {
$("img").click(function() {
$(this).animate({
height: '150px',
width: '150px'
});
//Call the function here
play_single_sound();
});
//Define it outside the click handler
function play_single_sound() {
document.getElementById('audiotag1').play();
}
});

if width == 200px run function

Here is a jsFiddle showing the problem
I'm not sure why this doesn't work:
if ($('#menu').width() == '200px') {
alert("what");
}
I want an alert to appear when the animation is completed. So I assumed that I could say that since when the animation is done the element has a width of 200px, it would show the alert.

1) You're checking for the value before the animation completes.
2) You width value will be "200" not "200px"
Here is the jQuery documentation. You need to perform your check in the callback section of the code.
$('#clickme').click(function() {
$('#book').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 5000, function() {
// Animation complete. <---- your value check code goes here
});
});

jQuery.width returns a number. You are comparing with a string.

Check the updated fiddle. What I did was added a 'callback' function, which executes whenever the animation is complete.
$(this).stop().animate({ width: "200px" }, 250,
function(){if ($('#menu').width() == '200') { alert("what"); } /* Callback Function */
});

.width() should return a number, not a "###px" value, Try if ($('#menu').width() == 200) {.

Make a DIV reveal upwards onClick

I found a topic for revealing a DIV upwards but as I am no Javascript expert, I am wondering how I can make this work onClick rather than on hover?
Just in case this helps, the link to previous topic is: How to make jQuery animate upwards
Any help is appreciated.

Here is a sample demo
$("#slideToggle").click(function () {
$('.slideTogglebox').slideToggle();
});
$("#reset").click(function(){
location.reload();
});
​
HTML:
<button id=slideToggle>slide</button>
<br/>
<div class="slideTogglebox">
slideToggle()
</div>

$(document).ready(function() {
var isClicked = false; //assuming its closed but its just logic
$('.button').click(function() {
if (isClicked) {
isClicked = true;
$(this).closest('div').animate({
height: "150px",
}, 400, "swing");
}
else
{
isClicked = false;
$(this).closest('div').animate({
height: "50px",
}, 400, "swing");
}
});
});
This is pretty bad way of doing it any way. You should consider trying to use CSS3 instead and then jsut using jQueries toggleClass
.toggleClass('animateUpwards)
Lets the browser use hardware capabilities to animate all the stuff and also its a nice one liner in JavaScript.

Try jQuery slideUp or as posted elsewhere jQuery slideToggle - Alternatively CSS3 Example
or from the questions you posted, perhaps this is what you meant:
http://jsbin.com/ogaje
Clicking the (visible part of) the div
$(document).ready(function() {
$('.featureBox').toggle(function() {
$(this).animate({top: '-390px', height:'540px'},{duration:'slow', queue:'no'});
// or $(this).slideUp()
},
function() {
$(this).animate({top: '0px', height:'150px'},{duration:'slow', queue:'no'});
// or $(this).slideDown()
});
});
Clicking something else
$(document).ready(function() {
$("#button").toggle(function() {
$("#someDiv").animate({top: '-390px', height:'540px'},{duration:'slow', queue:'no'});
// or $("#someDiv").slideUp()
},
function() {
$("#someDiv").animate({top: '0px', height:'150px'},{duration:'slow', queue:'no'});
// or $("#someDiv").slideDown()
});
});

jquery small error

i am very new at jquery and code, here i am trying to get the setTimeout event to be inside the .mouseout event but i'm not sure how to do that as i keep getting syntax error in my editor. Here's what i have:
jQuery(document).ready(function() {
$('.slidedown').hide();
$('.trigger').hover( function(){ // enter animation
$('.slidedown').stop(true,true).animate({
height: ['toggle', 'swing'],
}, 600, function() { /* animation done */ });
}, function(){ // leave animation
$('.slidedown').mouseout()
setTimeout( function(){
$('.slidedown').stop(true,true).animate({
height: '0px',
}, 600, function() { /* animation done */ });
}, 1000 );
});
});
A small nuance, in this code the user mouses over a div, then another div bellow it slides down. Moving the mouse to the .slidedown div should keep it open until the mouse is removed. But will this code collapse the .slidedown div if the user doesn't mouse over .slidedown after .trigger but instead moves the mouse directly from .trigger to another area of page? I.e i need some kind of 'setTimeout' that is trigged only if the user doesn't move mouse over .slidedown after hovering over .trigger. Hope i make sense. Thanks for your help!

This line is the problem
$('.slidedown').mouseout()
It shoule be
$('.slidedown').mouseout( YOUR_CALLBACK_FUNCTION )
You should pass a callback function which will act as an event handler and inside that event handler you can call setTimeout() the way you have done it.
So the correct code would look like this
$('.slidedown').mouseout( function() {
setTimeout( function(){
$('.slidedown').stop(true,true).animate( {
height: '0px',
},
600,
function() { /* animation done */ }
); // animate ends here
}, 1000 ); // setTimeout ends here
}); // mouseout ends here

Thanks T.J and Arnab, this works:
$(document).ready(function() {
$('.slidedown').hide();
$('.trigger').hover( function(){ // enter animation
$('.slidedown').stop(true,true).animate({
height: ['toggle', 'swing'],
}, 600, function() { /* animation done */ });
}, function(){ // leave animation
$('.slidedown').mouseout( function() {
setTimeout( function(){
$('.slidedown').stop(true,true).animate( {
height: '0px',
},
600,
function() { /* animation done */ }
); // animate ends here
}, 1000 ); // setTimeout ends here
}); // mouseout ends here
});
});
But the other thing i mentioned about moving the mouse over .trigger but then away (but not into .slidedown) doesn't work. The .slidedown just remains open. :) :( I think it will be very complex to get a .mouseout event that has a kind of 'allow' rule for one destination of the mouse.