We Keep Coding

Making a menu with toggle which can be animated using the top property

I'm trying to make a toggle button, so when you click once on #mbtn, it must be set to top:0px and when you click a second time, it must be set to top:-110px.
Here is the code I'm using but it seems like it's not working, where am I wrong?
<script>
$(document).ready(function() {
$('#mbtn').toggle(
function() {
$('.menu').animate({
top: "0px"
}, 500);
},
function() {
$('.menu').animate({
top: "-110px"
}, 500);
}
);
});
</script>

Per jQuery API, you have to use toggle with an action, such as click. For example:
$( "#mbtn" ).click(function() {
$( ".menu" ).toggle( "slow", function() {
// Animation complete.
});
});
JSfiddle
I assume you were trying to hide the menu bar? if so, take a look at .slideToggle() instead. Here is the JSfiddle example.

Javascript animation menu bug

I just coded a menu that has an animation in javascript. The script works as it should but I don't like that if you navegate throught the items from up to down, the menu gets really buggy and the texts start to display like crazy. A possible solution is, that when the mouse enters to a list item, it has to have a certain delay for the animation to start (for example, you must have the mouse there 3 seconds, if not, nothing happens). setTimeout won't do it, because it will execute the animation anyway. I am wondering if there is a work around this, because i can't come up with any.
this is the code that does the animation:
$( '.menu li a' ).hover( function(){
var el = $(this);
var numero = el.parent().index();
el.animate({
'height': height[numero]+'px'
}, 'slow');
}, function(){
$(this).animate({
'height': 0
}, 'slow');
});
jsfiddle here
I am trying to attempt this without using css Transitions. Thank you very much!

Try to stop the previous animation queue by using .stop(),
$( '.menu li a' ).hover( function(){
var el = $(this);
var numero = el.parent().index();
el.stop().animate({
'height': height[numero]+'px'
}, 'slow');
}, function(){
$(this).stop().animate({
'height': 0
}, 'slow');
});
DEMO

rcarousel scroll effect not working

using rcarousel for image gallery on my website. Everything works fine, except for scroll animation (reason for using this obviously). Inside the div are image's with link to page
PAGE
this is the script running:
<script type="text/javascript">
jQuery(function( $ ) {
$( "#carousel" ).rcarousel({
visible: 7,
step: 3
});
$( "#carousel ").rcarousel({
margin: 50
});
$( "#ui-carousel-next" )
.add( "#ui-carousel-prev" )
.hover(
function() {
$( this ).css( "opacity", 1.0 );
},
function() {
$( this ).css( "opacity", 0.8 );
}
);
});
</script>

It seems you have missed to include rcarousel.css. When I included from the server, It works fine
http://ryrych.github.io/rcarousel/widget/css/rcarousel.css
Please make sure your CSS path is correct.

Combining animate and load with jQuery

I'm trying to slide out a div, and once complete, fade in content with a .load request.
I'm not sure why this is incorrect, but this stops the animate and load completely:
$('.films').click(function(){
$('.content-home').animate({left: "+=150%"}, "slow", function(){
$( ".wrapper" ).load( "films.php", function(){
$(this).fadeIn();
});
});
});
However, by reverting to this code, it still loads the content without any animation or fade:
$('.films').click(function(){
$('.content-home').animate({left: "+=150%"}, "slow");
$( ".wrapper" ).load( "films.php");
});
Would anyone know why the first example does not perform as requested?

Use this for animate()
$( 'content-home' ).animate({ opacity: 0.25, left: "+=50",height: "toggle"},
5000,
"slow",
function() {
// your remaining code
});

Replacing an element by sliding it out and a new one in

basically, I want to show a table, and when the user clicks a link, I want the table to slide out to the left and another table to slide in from the right to the position where the original table was.
I've come so far (http://jsfiddle.net/JqkyA/4/):
$( "table.grid-1" ).hide( "slide", { direction: "left", duration: 5000 } );
$( "table.grid-2" ).show( "slide", { direction: "right", duration: 5000 });
Problem is, while the second table is sliding in, its x-position is correct but it is always displayed below the original table. I don't want that - I want the second table to slide in at the exact same y-position as the original table.
Any ideas on how to achieve this?
EDIT:
To be clear, I would like the new table to slide in on the same y-coordinate as the old table, but I still want the old table to be shown during slide-out. I also would like to have the new table slide in right next to the old one (no 'pause' between the tables as wm.p1us suggested).
Thanks for any help.

I think you should go with a different approach.
Instead of sliding the 2 tables just slide their container using negative margin and then hide the first table using the complete callback.
I also added display: inline-block to both tables.
Something like this:
$(".grids").animate({'margin-left': -110 }, 5000, function () {
$('table.grid-1').hide();
$(this).css("margin-left", 0);
});
See this working demo

$( function() {
$( "a" ).click( function() {
$( "table.grid-1" ).css({'position': 'absolute'});
$( "table.grid-1" ).hide( "slide", { direction: "left", duration: 5000 });
$( "table.grid-2" ).show( "slide", { direction: "right", duration: 5000 });
} );
} );

I've forked your JSFiddle
I added
<div class="inner">
as an inner wrapper and floated the tables to the left. animation is done by changing margin-left of the first table.
This will work as you wanted - the first table is still visible when the second one comes in..

Try this,
$( function() {
$( "a" ).click( function() {
if($( "table.grid-1" ).css('display') != 'none')
{
$( "table.grid-1" ).hide();
}
$( "table.grid-2" ).show( "slide", { direction: "right", duration: 5000 });
} );
} );
Let me know is it usefull?.