We Keep Coding

why text() function in jquery execute before fadeOut() function

I'm trying to do the following:
Fade out a div
Change its text
Fade it in again
The problem is, step 2 is happening before step 1. Why is that happening?
Here's the code:
<p id="p">
hi!
</p>
<button onclick="foo()">
wefew
</button>
<script>
$("button").click(function (){
var item = $("#p");
item.hide("slow");
item.text("text");
item.show("slow");
})
</script>
https://jsfiddle.net/pq35yd5t/
edit:
I found that the problem is that I'm using a for loop and that the callback function only work on ht elast loop... why, again
code:
for (var i = 0; i < ob_prop.length; i++) {
if (ob_prop[i]=="tag") {
continue;
}
var item = $("#"+ob_prop[i]);
item.hide("slow", function() {
item.text(work[pointer][ob_prop[i]]).show("slow");
});
}

Because fading is an asynchronous operation.
To do what you're doing, use the callback on hide:
$("button").click(function (){
var item = $("#p");
item.hide("slow", function() {
item.text("text");
item.show("slow");
});
})
In a comment you've said:
ok i have tried it but in the original code there's a for loop and function work only at the end of the loop
The callback will have this set to the element related to the callback, so use that rather than item:
$("button").click(function (){
var item = $("#p");
item.hide("slow", function() {
$(this).text("text").show("slow");
});
})
Your latest edit has the closures in loops problem. See that question's answers for details, but one of the solutions is to use $.each (or Array.prototype.forEach if you don't have to worry about obsolete browsers like IE8):
$.each(function(index, ob) {
if (ob != "tag") {
$(ob).hide("slow", function() {
$(this).text(work[pointer][ob]).show("slow");
});
}
});

jQuery fade in and fade out loop issue

I am making a results screen which toggles between showing the user their best time/score and their latest time/score. I found a solution using this site but after leaving the website open for a few hours I saw that the timings had gone out of sync. I know that this is hard to test so I thought I would see if any experts on here could help me to optimize or fix my code.
CODEPEN
JSFIDDLE
JS
$(document).ready(function() {
setInterval( function() { resultsTransition(); }, 4000);
function resultsTransition() {
$('.latest-transition').fadeOut(500).delay(3500).fadeIn(500).delay(3500);
$('.best-transition').fadeIn(500).delay(3500).fadeOut(500).delay(3500);
}
});

I think your design could be improved (and the out-of-sync problem solved) by simply toggling the opacity of the elements in your resultsTransition method instead of starting a new sequence, which could interfere unpredictably with the interval.
Something like:
var latestTransitionElementVisible = true; //the initial state of your elements
setInterval(resultsTransition, 4000); //note you can just pass the function name
function resultsTransition() {
$('.latest-transition').fadeTo(500, latestTransitionElementVisible ? 0 : 1);
$('.best-transition').fadeTo(500, latestTransitionElementVisible ? 1 : 0);
latestTransitionElementVisible = !latestTransitionElementVisible ;
}

I guess whatever problem/issue you are facing is because of varying animation times .Try the following:
$(document).ready(function() {
setTimeout( function() { resultsTransition(); }, 4000);
function resultsTransition() {
if(!$('.latest-transition').is(':animated') && !$('.best-transition').is(':animated'))
{
$('.latest-transition').fadeOut(500).delay(3500).fadeIn(500).delay(3500);
$('.best-transition').fadeIn(500).delay(3500).fadeOut(500).delay(3500);
setTimeout( function() { resultsTransition(); }, 4000);
}
}
});

Wait for animation function in javascript

I have the following methods in javascript:
Controller.prototype.changeScene = function (curScene, newScene) {
sf.scene.hide(curScene);
sf.scene.show(newScene, curScene);
sf.scene.focus(newScene);
};
And in another JS Class:
Test.prototype.handleHide = function () {
alert("SceneDialog.handleHide()");
$(".screenOverlay").fadeOut("slow");
$(".dialogBox").fadeOut("slow");
};
sf.scene.hide() calls the handleHide method. In handleHide there's some animation, but it's not shown. The Controller doesn't wait for it to be finished.
I tried $.when(sf.scene.hide()).done() without any luck.
Any suggestions?

You can use the jQuery queue to keep a list of animations that are queued to occur only after the previous one has completed.
sf.scene.hide(curScene);
sf.scene.show(newScene, curScene);
sf.scene.focus(newScene);
would become:
sf.scene.hide(curScene);
sf.scene.queue(function() {
$(this).show(newScene, curScene);
$(this).dequeue();
});
sf.scene.queue(function() {
sf.scene.focus(newScene);
$(this).dequeue();
});

You can use the promise() function of jquery to call a callback when ALL animations are over.
Try out:
Test.prototype.handleHide = function (callback) {
$(".screenOverlay,.dialogBox").each(
function(i) {
$( this ).fadeOut("slow");
}
);
$(".screenOverlay,.dialogBox").promise().done(callback);
};
And pass the callback as an argument to handleHide. Your changeScene function should look like this:
Controller.prototype.changeScene = function (curScene, newScene) {
sf.scene.hide(curScene, function() {
sf.scene.show(newScene, curScene);
sf.scene.focus(newScene);
});
};

if you are using jquery animation functions, jquery generally provides a complete parameter which will be called when the function is complete.
using fadeout:
$('#test').fadeOut('slow', function() {
// fadeout is finished!! do something
});

how to do jquery once fade out has finished?

I'm trying to fade out a div on a click but also change some css values.
the issue im having is that the values change while the fade out is happening (too early). I need the values to change once the fade out has finished:
<script type="text/javascript">
$('#r_text').click(function() {
$(".box1_d").fadeOut();
$(".box1_c").css("top","0px");
});
</script>
Now when i run that, everything works but just not exactly how i'd like it.. I need the css values to be changed once the fadeout has finished, not while it's still happening.
is this possible?
if so, any ideas how?
thank you.

Use a callback function to modify the .css() as the second parameter to fadeOut(). It will fire when the fade completes.
<script type="text/javascript">
var fadeTime = 500;
$('#r_text').click(function() {
$(".box1_d").fadeOut(fadeTime, function() {
$(".box1_c").css("top","0px");
});
});
</script>

Provided you use jQuery version >= 1.5, you can/should utilize the Deferred object instead of using the callback parameter:
$('#r_text').click((function () {
var animations = {
initial: function () {
return $(".box1_d").fadeOut(1500);
},
following: function () {
return $(".box1_c").css("top","0px").animate({fontSize: '150%'});
},
onDone: function () {
alert('DONE!');
}
};
return function(e) {
$.when(animations.initial())
.pipe(animations.following)
.done(animations.onDone);
e.preventDefault();
};
}()));
JsFiddle of it in action: http://jsfiddle.net/wGcgS/2/

Timer Reset Function Not Working!

Hello Guys!
I have been trying to create a simple sample code for my newest jQuery Plugin, but it doesn't seems to be working at all! Can anyone tell where I'm going wrong?, or can anyone provide me a new function to do it. So my problem is that when I mouse over an element classed trigger an another element classed eg should fadeIn(); but if the user takes out the mouse before the element classed eg fades in it should not be fading in anymore, but this is not working at all. I don't not what is getting wrong? Please help me out. (Below is my Problem HTML nad Jquery Code!)
HTML CODE
<div class="trigger">MouseOverMe</div>
<div class="eg">See Me!</div>
JQUERY CODE
function timereset(a)
{
var elem = $('.'+a);
if(elem.data('delay')) { clearTimeout(elem.data('delay')); }
}
$(document).ready(function () {
$('div.eg').hide();
$('div.trigger').mouseover(function () {
$('div.eg').delay(1000).fadeIn();
});
$('div.trigger').mouseout(function () {
timereset('eg');
$('div.eg').fadeOut();
});
});
THANKS IN ADVANCE

You don't need that timereset stuff, simply call stop() on the object and the previous effect will stop:
http://api.jquery.com/stop/
Update based on the new comment:
$('div.trigger').mouseout(function () {
$('div.eg').stop().hide();
});

jQuery
$('.trigger').hover(function() {
$('.eg').delay(1000).fadeIn();
}, function() {
$('.eg').stop(true, true).hide();
});
Fiddle: http://jsfiddle.net/UJBjg/1

Another option would be to clear the queued functions like:
$('div.trigger').mouseout(function () {
$('div.eg').queue('fx', []);
$('div.eg').fadeOut();
});
Bear in mind if the fadeOut/In has already started by using stop you could end up with a semi-transparent element.
EDIT
Here's an example: http://jsfiddle.net/Qchqc/

var timer = -1;
$(document).ready(function () {
$('div.eg').hide();
$('div.trigger').mouseover(function () {
timer = window.setTimeout("$('div.eg').fadeIn(function() { timer = -1; });",1000);
});
$('div.trigger').mouseout(function () {
if(timer != -1)
window.clearTimeout(timer);
$('div.eg').fadeOut();
});
});