I'm using the below to create a fade-in and fade-out effect on a hidden div on a FAQ page. Problem is, it makes the hidden div snap open and closed which is quite irritating. I'm not too hot on javascript and can't figure out how to get slideUp and slideDown into this, as I'd like it to also slide up and slide down. Is there any way to get a sliding function into this script? Thanks.
$(document).ready(function() {
$("a[name^='faq-']").each(function() {
$(this).click(function() {
if( $("#" + this.name).is(':hidden') ) {
$("#" + this.name).fadeIn('slow');
} else {
$("#" + this.name).fadeOut('slow');
}
return false;
});
});
});
You can fix this with a small CSS tweak by using visibility: hidden to hide the divs instead of display:none. This will reserve the space for the DIVs you are fading in & out.
You want to slide & fade at the same time? Try using .animate() to set opacity to 0/1 and use height to max/0.
If you want to use fading rather than slideUp/slideDown, you can use fadeTo(duration, opacity) which will not make stuff jump as the space for the element is maintained.
If you want a plugin to combine slide and fade, maybe check out this: http://css-tricks.com/snippets/jquery/combine-slide-and-fade-functions/
Related
My page initially starts out with 4 wrapper divs that each have a class of 'col-md-3' but after an expand button is clicked 3 of the wrappers are hidden and the clicked one gets 'col-md-12':
// If wrapper is the current wrapper expand to col-md-12 otherwise hide
$(".wrapper").each(function (index) {
if ($(this).attr("id") === wrapper.attr("id")) {
$(this).removeClass("col-md-3").addClass("col-md-12");
} else {
$(this).hide();
}
});
Is there any fast/easy way to animate something like this? I prefer not adding jQuery UI library to my project. I prefer a slide left to right motion.
The only thing I could come up with so far is doing:
$(this).hide('1000');
However, I prefer doing the animation on the adding of class "col-md-12" not the hiding of the others.
I prefer a slide left to right motion.
In JQuery you can animate Elements with
$(this).stop().animate({
right: '-50%' //distance of moving
}, 400); //time of moving in ms
I'm fixing my nav to the top of the page. I'm using Bootstrap (CSS only). I'm using jQuery to hide one logo (img class .logo) and show another (img class .logo-sm), on scroll.
Everything basically works, except for one thing. The hiding function slides the main logo to the left as it fades out, but I'd like it to slide up. I'm pretty sure this is not .hide() function's default behavior, but I don't know jQuery very well so I'm not sure how to change it.
I built a JSFiddle to demonstrate the behavior. It doesn't work consistently for some reason (it does locally), but you can see the logo sliding left the first time you scroll down.
JSFiddle
The script:
$(document).ready(function() {
// nav fixing
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$(".logo").hide(100);
$(".logo-sm").show(200);
} else {
$(".logo").show(100);
$(".logo-sm").hide(200);
}
});
});
This is happening because .show() is applying display: inline-block when what you need is display: block.
To fix this, you need to find what's setting the header .logo css display value to be inline and change it to block. From the jquery api, show will set the display property to whatever it was set to initially. In this case, it's inline-block which is why your logo is moving to the left.
$.hide() only sets the display of the element to none. It doesn't animate. That behavior is probably caused by having transitions in your CSS.
If you want to animate the element with jQuery, you can use .slideUp() and .slideDown().
$(document).ready(function() {
// nav fixing
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$(".logo").slideUp(100);
$(".logo-sm").slideDown(200);
} else {
$(".logo").slideUp(100);
$(".logo-sm").slideDown(200);
}
});
});
But you've got some other stuff going on in your fiddle that is causing some weirdness so this won't work much better. I would suggest not animating with jQuery, but use it to change classes on the elements and handle the animation with CSS transitions. Something like this:
$(document).ready(function() {
// nav fixing
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$(".logo").removeClass("showing");
$(".logo-sm").addClass("showing");
} else {
$(".logo-sm").removeClass("showing");
$(".logo").addClass("showing");
}
});
});
And then style the .showing class with transitions.
I've created something in jQuery, I have a problem when clicking the images though. If you scroll down entirely to the bottom of the page and then click, you'll see it jumps. I've tried multiple methods to prevent jumping but its not working.
Here is my code:
$('.author').click(function(e) {
var name = $(this).attr('id') + '-info';
$('.author-info article').hide();
$('#' + name).fadeIn();
$('.author').removeClass('active');
$(this).addClass('active');
e.preventDefault();
});
here is the live link - http://sites.lukespoor.com/author/
any help is appreciated
It is jumping because, when the first element fades out the height of the page changes. So, it scrolls to the bottom of the page. You cannot fix it with e.preventDefault.
Set a fixed height for the parent element.
.author-info {height:200px;}
fixes the problem.
Another solution will be
.author-info {position:relative;}
.author-info article {position:absolute;top:0;left:0;opacity:0;}
Instead of using .fadeIn set the opacity to 1 and instead of .fadeOut set the opacity to 0. You can use CSS transition or .animate for the fade effect.
I want to make a top 10 list where it updates to another set of top 10 list, but tickering the whole list to another is way too boring and simple.
What I want is to fade out then change each position one after another from top 1 to top 10.
I lack knowledge on javascript/jquery. but if my logic is right it only needs a 1 sec. timeout delay on each position and each position has the same interval delay changing one to another.
Try jQuery for animations
I'd suggest using jQuery for animations to fade elements in and out as well as animations, which it sounds like you're asking about.
jQuery — Fade controls.
$(document).ready(function () {
$('div').fadeToggle('slow'); //Fade in or out based on CSS display:.
$('div').fadeOut('slow'); //Fade an element (div) out.
$('div').fadeIn('slow'); //Fade an element (div) in.
});
jQuery — Slide controls.
$(document).ready(function () {
$('div').slideToggle('slow'); //Slide in or out based on CSS display:.
$('div').slideOut('slow'); //Slide an element (div) out.
$('div').slideIn('slow'); //Slide an element (div) in.
});
jQuery — Delay an animation.
$(document).ready(function () {
$('div').delay(500).slideToggle('slow'); //Slide in or out based on CSS display: after half a second.
});
Hi I use the following code to create a slideshow with multiple DIV elements:
var $ = jQuery.noConflict();
function fadeContent() {
$(".slideshow .asset-abstract:first").fadeIn(500).delay(2000).fadeOut(500, function() {
$(this).appendTo($(this).parent());
fadeContent();
});
}
fadeContent();
The slideshow works properly but there's a problem. When the delay(2000) trigger a fadeIn-fadeOut, the page scrolls up!
What can I do to prevent this?
I think when the element fades out it does not take a real estate on the page. The element beneath it will take its place and you feel like the page scrolled. You can have a wrapper to the element you are trying to fadeIn/fadeOut and provide an appropriate height to this wrapper element. But this is not a good UX because when the element will fadeOut there will be empty section on the page.
Its because the fadeOut method ends op settings display:none; on the element.
If you force display block in css this will not happen:
Css:
.slideshow .asset-abstract:first-child {
display:block;
}