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

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

Related

Trouble with Accordion and toggling icons

I am trying this for hours, but seems I have somehow a total brain-fart
What I want to achieve is making an accordion with toggling icons and sliding up panels.
This basically works the minus changes to plus but not when I toggle click the certain header.
$('.accordion-wrapper').on('click', function (e) {
e.stopPropagation();
$(this).next('div.accordion-panel').stop(true, false, true).slideToggle();
// $(this).find('.unalex-plus').toggleClass('glyphicon-plus glyphicon-minus');
$('div.accordion-panel').not($(this).next('div.accordion-panel')).slideUp();
if (!$(this).hasClass('active-panel')) {
$('.accordion-wrapper').find('.unalex-plus').removeClass('glyphicon-minus').addClass('glyphicon-plus');
$(this).find('.unalex-plus').removeClass('glyphicon-plus').addClass('glyphicon-minus ');
$(this).addClass("active-panel");
} else {
$('this').find('.unalex-plus').removeClass('glyphicon-minus').addClass('glyphicon-plus');
$('.accordion-wrapper').find('.unalex-plus').removeClass('glyphicon-plus').addClass('glyphicon-plus');
$(this).removeClass('active-panel');
}
});
This is my fiddle: https://jsfiddle.net/emd381md/11/
I've edited your Fiddle.
You shouldn't use addClass and removeClass in that manner.
toggleClass is a better (and more readable) solution.
Here is a working demo https://jsfiddle.net/ju9L9rne/13/.
Issues were with the names of classes in the if statement. You were using .unalex-plus which is a class all the accordians have, which is what caused the problems.
So I just changed that class to either .glyphicon-minus or .glyphicon-plus depending on, which was needed.
The changed code:
if (!$(this).hasClass('active-panel')) {
$('.accordion-wrapper').find('.glyphicon-minus').removeClass('glyphicon-minus').addClass('glyphicon-plus');
$(this).find('.glyphicon-plus').removeClass('glyphicon-plus').addClass('glyphicon-minus ');
$(this).addClass("active-panel");
} else {
$('.accordion-wrapper').find('.glyphicon-minus').removeClass('glyphicon-minus').addClass('glyphicon-plus');
$(this).find('.glyphicon-plus').removeClass('glyphicon-plus').addClass('glyphicon-minus');
$(this).removeClass('active-panel');
}
I don't check your whole code but this looks a bit crazy, maybe the error is here?
$('.accordion-wrapper').find('.unalex-plus').removeClass('glyphicon-plus').addClass('glyphicon-plus');
You first remove glyphicon-plus and add it afterwards.

Toggle instead of Just Appearing?

I'm using the code below to display a notice at the top but it just appears out of nowhere. I would like it to scroll down similar to a toggle while pushing down all the content in the div below it down.
Heres the Javascript
<script>
window.onload = function() {
setTimeout(function() {
document.getElementById('top').style.display = 'block';
}, 10000);
}
</script>
html:
<div id="top">
<p>content here</p>
</div>
Use .slideDown() instead of changing the display property to block
window.onload = function () {
setTimeout(function () {
$('#top').slideDown()
}, 10000);
}
You have this question tagged with jQuery, and there is a straight forward jQuery function for this, so here is that version:
$(function(){
setTimeout(function(){
$('#top').slideDown();
}, 10000);
});
http://api.jquery.com/slideDown/
If you want to do this in plain javascript I would recommend using CSS3 transitions, instead of modifying attributes like display or attempting to perform the animation manually.
An example of this method using CSS3 and max-height, can be found here: http://davidwalsh.name/css-slide
You would then use javascript to add and remove classes to toggle the desired state, the animation would be performed for you by the CSS3 transitions.

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

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

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.

Categories