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>

jQuery fadeIn issue or alternative

I'm sending a post request to a file and putting that in the id='balance' but I want it to flicker or fadeIn so that the user knows that it's being updated live. I tried adding a fadeIn() but it's not doing what I'm trying to do. Am I doing it wrong or is there a better way? Code below.
var balance_update = setInterval(function() {
$.post('./requests/balance.php', function(balance) {
$('#balance').html(balance).fadeIn(1000);
});
}, 400);

You probably just need to hide it first, since fadeIn() does nothing for visible elements...
var balance_update = setInterval(function() {
$.post('./requests/balance.php', function(balance) {
$('#balance').html(balance).hide().fadeIn(1000);
});
}, 400);

The visibility of your element needs to be hidden.
Use CSS {display: none; } or jQuery's .hide method whebjQuery(document).ready(); fires

This should work
$('#balance').html(balance).hide(function(){fadeIn(1000)});

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);
});

Changing the order of events in Jquery

So I created some pop-up code that will contain specific information from each link clicked in the pop-up. When closed, the content in the pop-up div gets deleted. Here is my code:
var $content = $('#popupcontent');
var $window = $('#popupwindow');
$('.open').click(function(){
//alert('runnning');
var a = $(this).contents('span');
$content.append(a);
$window.fadeIn(300);
});
$('.close').click(function(){
//alert('running');
var a = $content.contents('span');
$window.fadeOut(300);
$('#popupcontent span').remove();
});
My issue is that it is somehow removing the content before fading out, so the viewer can then see that the pop-up container goes blank. How can I make it so that it will surely fade out first and then remove the content? Here is a Jsfiddle to illustrate that: http://jsfiddle.net/kAdQK/4/

You may want to utilize the complete call back argument for the fadeout method, to remove the element once fadeout is completed. With your current code it will start the fadeout animation and then immediately remove the content without waiting for fadeout animation to complete, hence you get the visual effect that you are seeing now. Using the callback you make sure that it gets executed once the animation is complete.
$window.fadeOut(300, function () {
$('#popupcontent span').remove();
});
Syntax
.fadeOut( [duration ] [, complete ] )
Fiddle

You can use the animation complete to remove your element after the fadeout ends.
The following code will ensure that #popupcontent is removed only after it's faded out
$window.fadeOut('slow', function() {
$('#popupcontent span').remove();
});

Just use a setTimeout();
$window.fadeOut(300);
setTimeout(function(){
$('#popupcontent span').remove();},2000);
Example Here

Hide/show DIVs - change current effect to fade

I'm currently using the code below found on web tutorial to show/hide DIVs. It works great but don't like the effect. Would like the DIVs to fade in / fade out instead (or something smoother, for the moment the DIVs are growing from the top-right corner). How could I adapt the code to do this? Youc ans ee it here http://jsfiddle.net/Grek/w4HWn/1/ Many thanks
function showonlyone(thechosenone) {
$('.textzone').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show(2000);
}
else {
$(this).hide(2000);
}
});
}

Just change .hide() to .fadeOut() and .show() to .fadeIn()
But looking at your example, you could do it much simpler by using data attributes.
Have a look at this example.
You may need absolute positioning or some other technique because the two divs stack up while fading in and out.

You can use fadeIn and fadeOut methods, you can also minify the code, try the following:
function showonlyone(thechosenone) {
$('.textzone').fadeOut();
$('#'+thechosenone).fadeIn();
}
As you are using jQuery you can use the jQuery click handler:
HTML:
<div class="source-title-box"><span class="activity-title">Our region</span></div>
<div class="source-title-box"><span class="activity-title">Our source</span></div>
jQuery:
$('.activity-title a').click(function(e){
e.preventDefault()
var thechosenone = $(this).attr('href');
$('.textzone').fadeOut(600, function(){
$(thechosenone).fadeIn(600);
});
})
DEMO