We Keep Coding

jQuery adding css properties to element too soon

I am trying to have an element on the page fade out upon mouseleave, then apply some css properties to it. The problem is that the css properties are being added to the element before it has completely faded out. Here is what I've tried:
$(".tiptrigger").mouseleave(function() {
var s_id = $(this).attr('id');
$("#tiptip_holder-"+s_id).fadeOut("fast");
$("#tiptip_holder-"+s_id).css({"margin-left": "0px", "margin-top": "0px"});
});
When that didn't work, I tried:
$(".tiptrigger").mouseleave(function() {
var s_id = $(this).attr('id');
$("#tiptip_holder-"+s_id).fadeOut("fast").delay(500).css({"margin-left": "0px", "margin-top": "0px"});
});
And when that didn't work, I finally tried:
$(".tiptrigger").mouseleave(function() {
var s_id = $(this).attr('id');
$("#tiptip_holder-"+s_id).fadeOut("fast");
}, function() {
$("#tiptip_holder-"+s_id).css({"margin-left": "0px", "margin-top": "0px"});
});
Any suggestions?

You can use the callback function here like:
$("#tiptip_holder-" + s_id).fadeOut("fast", function () {
$(this).css({
"margin-left": "0px",
"margin-top": "0px"
});
});

Use the callback:
$("#tiptip_holder-"+s_id).fadeOut("fast", function(){
$(this).css({"margin-left": "0px", "margin-top": "0px"});
});
This will complete the animation and, once that's completed, initiate whatever's in the callback (anonymous) function.
Using the delay() will only delay the animation queue.
References:
fadeOut().

try this
$.when($("#tiptip_holder-" + s_id).fadeOut(500))
.done(function() {
$(this).css({
"margin-left": "0px",
"margin-top": "0px"
});
});

Try it as a callback function:
$("#tiptip_holder-"+s_id).fadeOut("fast", function(){
$(this).css({"margin-left": "0px", "margin-top": "0px"});
});

You can use a callback on the fadeOut, to do something when the animation completes, like so:
$(".inner").mouseleave(function() {
$(this).fadeOut(400, function() {
$(this).css({
"margin-top": "0px",
"margin-bottom": "0px"
});
});
});
Have a look at this jsFiddle

jquery animate lag issue

I have a contentSlider with width 200% and i am trying to use .animate to slide the content left and right. But during animation, there is some degree of lag. Here is my animate code.
$("#contentSlider").stop().animate({
left: "-100%"
},{
duration: 1000,
easing: "linear",
complete: function(){
$("#"+page).remove();
$('#contentSlider').css('left', '0px');
pageID = clickedID;
page = pageName;
if($("#audioControl").hasClass('audio')){
enableCowSound();
}else{
$(".moosound").off('hover');
}
$(container).removeClass('animating');
}
});
Appreciate any help!

slideToggle animates "show" but not "hide"

I have a website with 100% height that has a hidden footer, that needs to slide up and show it when a button is clicked, and when that button is clicked again, it should slide down and hide it.
The problem is that the sliding animation is only working when the footer slides up, and when it should slide down, it bumps without animation.
You can see the problem right here, by clicking on the "More" button in the footer.
The JS code used to manipulate that button is the following:
$(document).ready(function(){
$(".footer_container").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
var speed = "500";
$(".footer_container").slideToggle(speed);
$('html, body').animate({
scrollTop: $(document).height()
}, speed);
});
});
Thanks in advance!
Update: I just tried this code:
$('.show_hide').click(function(){
var speed = "500";
$(".footer_container").toggle(speed);
$('html, body').animate({
scrollTop: $(".footer_container").offset().top + $('window').height()
}, speed);
});
And aparently there's an animation going on the footer that I didn't know exist. Maybe that's the cause of this problem?

alright so i gave this a shot:
$('.show_hide').unbind()
$('.show_hide').click(function () {
var speed = "500";
$(".footer_container").toggle(speed);
if ($(".footer_container").data('can-see')) {
var displaced = $('.footer_container').height();
$('.twitter_footer').animate({
marginTop: "600px",
}, {
duration: speed,
complete: function () {
$('.twitter_footer').css('margin-top', "0");
}
});
}
$('html, body').animate({
scrollTop: $(".footer_container").offset().top + $('window').height()
}, speed);
$(".footer_container").data('can-see', !$(".footer_container").data('can-see'))
});
demonstration at http://jsfiddle.net/DPq5Z/
same result, another way (using absolute positioning in order to keep elements above undisturbed):
$('.show_hide').unbind()
$('.show_hide').click(function () {
var speed = "500";
$(".footer_container").fadeToggle(speed);
if ($(".footer_container").data('can-see')) {
slide_down('.twitter_footer', speed);
slide_down('.button_bg', speed);
}
$('html, body').animate({
scrollTop: $(".footer_container").offset().top + $('window').height()
}, speed);
$(".footer_container").data('can-see', !$(".footer_container").data('can-see'))
});
function slide_down(c, speed){
var tp = $(c).offset().top;
$(c).css({
'position': 'absolute',
'top': tp + "px"
});
$(c).animate({
top: tp + 170 + "px",
}, {
duration: speed,
complete: function () {
$(c).css({
'position': "relative",
'top': '0'
});
}
});
}
demonstration at http://jsfiddle.net/9R6L4/

It works as how default animations in jQuery work. If you want to customize this. You need to use jQuery easing plugin. It takes as parameter the easing effect, like easeIn, easeOut, Bounce etc.. that controls the flow. By default it is linear and that is what you see.
Easing Plugin: https://github.com/gdsmith/jquery.easing
$('.show_hide').click(function(){
var speed = "500";
$(".footer_container").fadeToggle(speed);
$('html, body').animate({
scrollTop: $(".footer_container").offset().top + $('window').height()
}, speed);
});
jsFiddle: http://jsfiddle.net/vvmYH/4/

objects disappear while sliding over them while they fade in

I have a problem with some jQuery fadeIn effect. This is actually on this website: website here. The problem appears when you select any option from the main menu and during page load up (menu is fading In) slide over the menu buttons. Then some of them (the one you were fading over) will not appear, or will appear slightly faded.
I have used this code for buttons:
HTML:
<nav>
<a id="b1" href="index.html"><span>01. <strong>ABOUT US</strong></span><div></div></a>
<a id="b2" href="webdesign.html"><span>02. <strong>WEBSITE DESIGN</strong></span><div></div></a>
<a id="b3" href="mobile-websites.html"><span>03. <strong>MOBILE WEBSITES</strong></span><div></div></a>
<a id="b4" href="captive-portals.html"><span>04. <strong>CAPTIVE PORTALS</strong></span><div></div></a>
<a id="b5" href="portfolio.html"><span>05. <strong>PORTFOLIO</strong></span><div></div></a>
<a id="b6" href="contact-us.html"><span>06. <strong>CONTACT US</strong></span><div></div></a>
</nav>
JQUERY:
$(document).ready(function(){
$("nav a").mouseenter(function () {
$('div', this).stop(true, false).animate({
'height': '65px'
}, 100);
$(this).stop(true, false).animate({
'padding-top': '5px'
}, 300);
}).mouseleave(function () {
$('div', this).stop(true, false).animate({
'height': '0px'
}, 300);
$(this).stop(true, false).animate({
'padding-top': '25px'
}, 500);
});
$('#b1, #b2, #b3, #b4, #b5, #b6, #b7').hide();
for (var i=1; i<99; i++) {
(function(i){
setTimeout(function() {
$('#b'+i).fadeIn(500);
}, 300+100*i);
})(i);
}
});
JS FIDDLE HERE:
http://jsfiddle.net/tucado/9hhZW/
(slide mouse over buttons while fading in and you will know what I mean).
Basically I want buttons to appear normally so the sliding mouse over them won't interrupt them in fading to 100%.
Thank you in advance for any solution for this problem.

Just return from your mouseenter and mouseleave handlers if the element is being animated, you can do that with .is(':animated') .
See working fiddle
UPDATE: My above solution will exit when the element is animating, but that also included the own animations of the mouseenter, mouseleave handlers, we want to only exit if it's the fadein animation, so to distinguish that I set a property called fading when starting to fading an element and remove it when it ends the fade effect, so we can check for this property in the mouseenter mouseleave handlers.
See new working fiddle
And I paste the code here:
$(document).ready(function(){
$("nav a").mouseenter(function () {
if ($(this).data('fading')) //EXIT IF WE ARE FADING
return;
$('div', this).stop(true, false).animate({
'height': '65px'
}, 100);
$(this).stop(true, false).animate({
'padding-top': '5px'
}, 300);
}).mouseleave(function () {
if ($(this).data('fading')) //EXIT IF WE ARE FADING
return;
$('div', this).stop(true, false).animate({
'height': '0px'
}, 300);
$(this).stop(true, false).animate({
'padding-top': '25px'
}, 500);
});
$('#b1, #b2, #b3, #b4, #b5, #b6, #b7').hide();
for (var i=1; i<99; i++) {
(function(i){
setTimeout(function() {
$('#b'+i).data('fading', true).fadeIn(500, function() {
$(this).data('fading', false);
});
}, 300+100*i);
})(i);
}
});

I think the problem is, that you stop the elements animation before they are initialized first (first fadeIn();)
I've created a fiddle for you using the fadeIn() callback to append the hover after showing first time:
$(document).ready(function(){
var appendHover = function () {
$("nav a").mouseenter(function () {
$('div', this).stop(true, false).animate({
'height': '65px'
}, 100);
$(this).stop(true, false).animate({
'padding-top': '5px'
}, 300);
}).mouseleave(function () {
$('div', this).stop(true, false).animate({
'height': '0px'
}, 300);
$(this).stop(true, false).animate({
'padding-top': '25px'
}, 500);
});
}
$('#b1, #b2, #b3, #b4, #b5, #b6, #b7').hide();
for (var i=1; i<99; i++) {
(function(i){
setTimeout(function() {
$('#b'+i).fadeIn(500, function() {appendHover();});
}, 300+100*i);
})(i);
}
});
http://jsfiddle.net/9hhZW/2/

Make div animate up and down with jQuery

Im trying to get a div move up and down from its current position during a mouse hover event - I have the followng but it only works once and then stops as opposed to continually cycling?
tiptitle.stop(true, true).animate({
'top': '5px'
}, 100).stop(true, true).animate({
'top': '0px'
}, 100);

make an infinite loop
function animate(isOpen) {
tiptitle.stop().animate({'top': isOpen ? '5px' : '0px'}, 100, function() { animate(!isOpen); })
}