We Keep Coding

jQuery transitions: on load and after for each click, an addClass

Well, let me try to explain my gol:
I did a small project (Random Quote Machine from ferecodecamp.com), and it is quite functional. But I want to make it like an slide show (Power Point) with transitions.
See what I have for now Random Quote Machine project
The page should load the quote making a transition from zero opacity to total.
2 .When I click button generate, it should change the quote and again, it should be a quote thate comes from 0 opacity to 1.
The CSS could be something like:
span, i, footer{
opacity: 0;
}
.transitions {
transition-duration: 1s;
opacity: 1;
}
span, i, footer goes from 0 to 1 on opacity with a transition-duration of 1 second.
I tried some jQuery but nothing had gone well the way I want
<script type="text/javascript">
//for page load
$(".quote").load(function(){
$(".quote").addClass("transitions");
});
//for new quote generated
$(".button").click(function() {
$(".quote").fadeOut("slow", function() {
$(this).addClass("quote");
});
$(".quote").fadeIn("slow", function() {
$(this).addClass("quote");
});
});
</script>
Fist part doesn't work at all. The .load event has never worked and .ready just works with a .click event.
Second part, partialy works, but it first desapears and after apears. I want to be desapeared (0 opacity) to total apear...
I've been trying for two long days and nothing is going realy well. I would be really glad in read some suggestions.
Thanks in advance!

I would do it like this:
// equivalent to $(document).ready(function()
$(function() {
// define an array of elements to fade
var elements = [$('#quote'), $('#author')];
fade(); // call a custom function defined below which will execute on page load
// on .button click, call the same function
$('.button').click(fade);
function fade() {
// for each element in elements (defined above), execute jQuery's hide() method and then fadeIn()
$.each(elements, function(index, element) {
element.hide().fadeIn();
});
}
});
If you paste this in the console within your project, it works nicely.

note: $.load() was deprecated in jQuery version 1.8.
This should be what you wanted:
$(document).ready(function(){
$(".quote").fadeIn(1000);
});
$(".button").click(function() {
$(".quote").fadeOut(1000, function() {
// change the quote here
$(".quote").fadeIn(1000);
});
});
.quote {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button">new</button>
<div class="quote">quote</div>

Add and then remove <p>

I want add <p> with text when my form have some error. I write some js code, but it does not work now.
My question is: how can i add text, if i have error, show it 1800 ms, add then remove this text?
$(document).ready(function () {
........................
error: function () {
$('form').append("<p class='er-msg'></p>").text('Maximum upload size 50MB. Please try again');
$('.er-msg').animate({ opacity: 0} , 1800);
$('.er-msg').remove(); //don't work
}
};
....................
});
I hope someone help me.

Now your animation takes 1800ms and, from what I understand, you want a delay of that time before you hide the message. So you should start with a setTimeout like this
setTimeout(function () {
$('.er-ms').animate({ opacity: 0} , 1800);
}, 1800);
jQuery animate takes a 3rd parameter, which is a function that will be called after the animation is over. Then you can add this, to make the message disappear.
setTimeout(function () {
$('.er-ms').animate({ opacity: 0} , 1800, function () {
$(this).hide().remove();
});
}, 1800);
When you put this in the error callback, after the append line, and get rid of the last two, you should be good to go.

The append of <p> is not working that's why you can't remove it.
Try it this way:
$(document).ready(function () {
........................
error: function () {
$('form').append("<p class='er-msg'></p>");
$('.er-ms').text('Maximum upload size 50MB. Please try again');
$('.er-ms').animate({ opacity: 0} , 1800);
$('.er-ms').remove();
}
};
....................
});

Is the actual append even happening?
I suspect it is not because you are appending <p> dynamically.
In order to successfully bind to this, you will be need to target its wrapper.
for example:
$('form').on(eventname, targetElement, function(){
....the behavior you want
});
you can check out this blog post for more info: http://blog.ning-xia.com/accessing-dynamically-created-elements-with-jquery/

Another way to do is it to create the <p> and set it to display: none then you can just toggle it as needed.
html:
<p class='er-msg'>Maximum upload size 50MB. Please try again</p>
CSS:
.er-msg {
display: none
}
jQuery:
error: function () {
$('.er-msg').fadeIn("slow");
setTimeout(function(){
$('.er-msg').fadeOut("slow");
}, 1800);
}
As a personal suggestion, I would make the timer slightly higher to accommodate people that don't read fast. This way your error message is effective for anyone that happens to see it.
JSFIDDLE DEMO

Simple solution
Here is an example how you could do this:
var errorMessage = 'test message';
$('#question-header').append(
$(
'<p class="er-msg">' +
errorMessage +
'</p>'
).animate(
{opacity: 0},
1800,
function(){
$(this).remove();
}
)
);
You can call a function inside animate that runs after animation is complete. Try to run this on this page in your console. Note that with this multiple error can be thrown in different orders and they will all show the correct behavior. You couple the animation and the removal to all your unique error messages in a simple way.
Your code does not work because text should be called on that created element not the element your appending it to.
Proper way:
$('form').append($('<p class="er-msg"></p>').text('Maximum uplo...'));
But I think the example above is a lot more readable, abstract and more performant.

Won't fade in when using .show("slow")?

I have two divs that are set to show only one at a time, but I cannot seem to get them to slowly fade in with .show("slow"). Fading out works fine with .hide("slow"). Here's what I have so far:
$(document).ready(function() {
$('#162').hide();
$('#164').hide();
function reveal162() {
$('#162').show("slow");
$('#164').hide("slow");
}
$('#162link').click(reveal162);
function reveal164() {
$('#164').show("slow");
$('#162').hide("slow");
}
$('#164link').click(reveal164);
});
jsFiddle with an example: http://jsfiddle.net/swiftsly/9Yx8b/

To animate using show(), element need to be displayed as block, you can use display:block
version{
display:block;
}
DEMO

Your fiddle example is using non-standard tags such as <vn> and <version>. The show and hide methods work as expected when these tags are replaced with <div>. Is there a reason for the non-standard tags?

Try the fadeIn() and fadeOut() functions instead.

$(document).ready(function() {
$('#162').fadeOut();
$('#164').fadeOut();
function reveal162() {
$('#162').fadeIn("slow");
$('#164').fadeOut("slow");
}
$('#162link').click(reveal162);
function reveal164() {
$('#164').fadeIn("slow");
$('#162').fadeOut("slow");
}
$('#164link').click(reveal164);
});

JQuery fadeOut callback function is being executed after fadeOut is over

On a click of a button, i'm trying to fadeOut an image, and while it is fading out i'm changing the source of the image. And then i'm using the fadeIn to show the new image. This works fine in Chrome, and firefox. However, in ie10, the image fades out, fades in, and then the new image appears. I can't find a a fix for it. I've tried to prolong the duration of fadeOut, fadeIn. I've tried using setTimeout function. i've tried using promise().done() function. I've tried using Jquery UI's hide/show w/ slide effect, and same issues are appearing. Nothing seems to be working. I'd really appreciate any help. Thanks
me.$el.find('#printable-detail-static-imageRight').fadeOut('fast', function(){
me.$el.find('#printable-detail-static-imageRight').attr('src', me.options.samplePrints[k+i]);
me.disableNext();
});
me.$el.find('#printable-detail-static-imageRight').fadeIn('slow')

I'm pretty sure you need to put the .fadeIn method inside the callback function in order for it to be affected by the callback function. In fact, I'd add another callback function to the .attr method to make sure that it fades back in only after the src has been changed.
Here's a jsFiddle I wrote to illustrate what I mean.

i am on a mac, but does this code works in ie ? jsFiddle
.html
<div id="content">Promises</div>
<button id="click">start animation</button>
.js
$("#click").on("click", function () {
$('#content').fadeOut({
duration: 1000,
// run when the animation is complete
complete: function () {
$("#content").append($("<div>").addClass("fakeimg"));
},
// run when the animation is complete +
//it's promise is resolved
done: function () {
$('#content').fadeIn(1000);
}
});
});

this works:
me.$el.find('#printable-detail-static-imageRight').animate({
opacity:0
}, {
duration: 700,
step: function(now, fx){
if(fx.pos > 0.40 && fx.pos < 0.5){
$(this).attr('src', me.options.samplePrints[k+i]);
me.disableNext();
}
if (fx.pos ==1) {
$(this).animate({
opacity:1
}, 200);
}
}
});

replaceWith() while elements fadeOut() and fadeIn() in JQuery

What I'm trying to do is simply, fadeout all images inside containers, replace #next1's image to #active and after that fadein all images again.
here is my code:
$('.logo').fadeOut('slow', function() {
$('#active>img').replaceWith( $('#next1>img') );
}).fadeIn('slow', function() {});
this does not work. i found myself looking at the empty #active
but this however;
$('.logo').fadeOut('slow', function() {}).fadeIn('slow', function() {});
$('#active>img').replaceWith( $('#next1>img') );
makes the replacing just fine but not the animation i'm trying to do.
i get same results with both chrome and ie.

My suggestion here would be to look at the promise/done methods in jQuery. As an example here you could do something like:
$('.logo').fadeOut('slow').promise().done(function(logo) {
$('#active>img').replaceWith($('#next1>img'));
$(logo).fadeIn('slow');
});
jQuery promise - http://api.jquery.com/promise/

Try:
$('.logo').fadeOut('slow', function() {
$('#active>img').replaceWith( $('#next1>img') );
$(this).fadeIn('slow');
});
Assuming what you want to achieve is fading out, then replacing the content while .logo is hidden, then fading in after the logo is replaced.