We Keep Coding

Javascript animation

On my webpage I have a members button which animates a dropdown when toggled. The only problem is that it animates every time I load a page without clicking the button to cause the action. I would like it to only open when the button is clicked and be hidden completely the rest of the time.
The javascript I am using is:
$(document).ready(function() {
$('#members').animate({
marginTop: '-80px'
}, 0);
$('.mem').toggle( function() {
$('#members').animate({
marginTop: '0'
}, 500);
},
function() {
$('#members').animate({
marginTop: '-80px'
}, 500);
});
});
As you can see it first animates the div to be -80px. I want it to be -80px without having to animate it every time I load up any page.
Thanks!

To #members css class, just add that:
display:none;
I also updated the javascript:
$(document).ready(function() {
$('#members').css({
marginTop: '-80px'
});
$('.mem').toggle(function(){
$('#members').css({
display: 'block'
});
$('#members').animate({
marginTop: '0'
}, 500);
},
function(){
$('#members').animate({
marginTop: '-80px'
}, 500);
});
});

You need to attach the animate function to a button click. Since you haven't posted the HTML, you'll need to replace "buttonSelector" with the actual selector you want to use.
For example
$(document).ready(function () {
$(buttonSelector).click(function () {
$('#members').animate({
marginTop: '-80px'
}, 0);
$('.mem').toggle(function () {
$('#members').animate({
marginTop: '0'
}, 500);
}, function () {
$('#members').animate({
marginTop: '-80px'
}, 500);
});
});
});

How do I mix between addClass Api and fadein?

I just would like to put color on div by addClass event and then it should fade in.
$("#box1").hover(
function () {
$("#box2").addClass("blue");
$("#box3").addClass("yellow");
},
function () {
$("#box2").removeClass("blue");
$("#box3").removeClass("yellow");
}
);
$("#box2").hover(
function () {
$("#box1").addClass("blue");
$("#box4").addClass("yellow");
},
function () {
$("#box1").removeClass("blue");
$("#box4").removeClass("yellow");
}
);

I know it's pretty ugly but it's worked :
$('#box1').hover(function () {
$("#box2").fadeOut(0).addClass('blue').fadeIn(300);
},
function () {
$("#box2").fadeOut(300).queue(function(){ $(this).removeClass('blue').fadeIn(0).dequeue()});
});
Demo here : JSFIDDLE

How unbind then bind again?

$('.imgc').hover(
function(e) {
$(this).effect("bounce", { times:5 }, "slow");
},
function(e) {
$(this).unbind('mouseenter');
});
I need to set an effect on the image. But I need this effect to work only at once. But then I need to bind again on mouseout. But it does not work.
('.imgc').bind('mouseenter', e);
How can I do this?

Try like
$('.imgc').on('hover', function(e) {
$(this).one(function () {
$(this).effect("bounce", { times:5 }, "slow");
});
$(this).off('mouseenter');
},
function(e) {
$(this).on('mouseenter');
});

You should try this,
$(".imgc").on({
mouseenter:function(){
$(this).effect("bounce", { times:5 }, "slow");
},
mouseleave:function(){
}
});
hover is basically a pseudoevent, which maps to mouseenter and mouseleave.

Javascript/jQuery, Display div after animation finishes

here is a working jsfiddle:
http://jsfiddle.net/YnT2X/
I don't want the div to display until AFTER the return animation completes.
jQuery:
$(document).ready(function () {
$("#menu").hover(function () {
$('#arrow').hide();
$("body").children(':not(#menu)').css("-webkit-filter", "blur(2px)");
$(this, '#arrow').stop().animate({
width: "200px"
}, 250,
function () {
if ($('#menu').width() == '200') {
$('.text').fadeIn(200);
}
});
}, function () {
$(this).stop().animate({
width: "0px"
}, 250)
$("body").children(':not(#menu)').css("-webkit-filter", "none");
$('.text').fadeOut('fast');
$('#arrow').show();
});
});

Try this:
Fiddle: http://jsfiddle.net/upycZ/
$(document).ready(function () {
$("#menu").hover(function () {
$('#arrow').hide();
$("body").children(':not(#menu)').css("-webkit-filter", "blur(2px)");
$(this, '#arrow').stop().animate({
width: "200px"
}, 250,
function () {
if ($('#menu').width() == '200') {
$('.text').fadeIn(200);
}
});
}, function () {
$(this).stop().animate({
width: "0px"
}, 250,function(){
$('#arrow').show(); //<- Shows arrow after run
});
$("body").children(':not(#menu)').css("-webkit-filter", "none");
$('.text').fadeOut('fast');
});
});

wrapper function bracketing

I'm quite new to javascript and I'm having a difficult time with this multi function call
This bit is running fine
$('.pages').live("swiperight", function () {
if (!menuStatus) {
$(".ui-page-active").animate({
marginLeft: "165px",
}, 300, function () {
menuStatus = true
});
}
});
and I'd like to add
(document).scrollTop(0);
so that a user will be taken to the top of long pages as the menu opens... any help would be appreciated....

You should be able to use something like this to perform your scroll:
$("html, body").animate({ scrollTop: 0 }, "slow");
So if you wanted to add this to your current function as shown: (you can place it wherever you would like it to occur)
$('.pages').on("swiperight", function () {
if (!menuStatus) {
$(".ui-page-active").animate({
marginLeft: "165px",
}, 300, function () {
menuStatus = true
});
//Perform scroll-to-top action
$("html, body").animate({ scrollTop: 0 }, "slow");
}
});
additionally, this could should also work (as mentioned by Jan):
$('document').on("swiperight",".pages", function () {
if (!menuStatus) {
$(".ui-page-active").animate({
marginLeft: "165px",
}, 300, function () {
menuStatus = true
});
//Perform scroll-to-top action
$("html, body").animate({ scrollTop: 0 }, "slow");
}
});