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.

jquery stop() not working when combining jquery fade and slide jquery-ui

I used the following javascript:
$('.slide-content #show-effect-1').hover(function(){
$(this).next().stop(true, true).fadeIn({ duration: _duration, queue: false }).css('display', 'none').show('slide', { direction: "down" }, _duration);
},
function() {
$(this).next().stop(true, true).fadeOut({ duration: _duration, queue: false }).hide('slide', { direction: "down" }, _duration);
});
What should happen is:
mouseenter the button --> content show
mouseout the button --> content hide
Question: when mouseout on the button is faster than the effect time of mouseenter, the content will be hidden and not displayed when mousenter the button again.
How do I prevent this happening?

Instead of using separate funcitons for the fadeIn and slide effect I decided to implement both in a single animate() function, then I just added some CSS resets to make sure the element is ready before starting the animation:
$(document).ready(function () {
var _duration = 1000;
$('#show-effect-1').hover(function () {
var $next = $('.text-banner');
$next.show();
$next.stop(true, true).css({
'margin-left': $next.outerWidth() * -1,
'margin-top': 0,
'opacity': 0,
'display': 'block'
}).animate({
'margin-left': 0,
'opacity': 1
}, _duration);
}, function () {
var $next = $('.text-banner');
$next.stop(true, true).animate({
'margin-top': $next.height() * -1,
'opacity': 0
}, _duration, function () {
$(this).hide();
});
});
});
Check the Updated fiddle
Note that I had to add a container to accurately reproduce the slide effect, you can test without it and see if it's something you actually need

Make this widget for jQuery-plugin work?

I am using the jQuery plugin Gridster.
I have made an add_widget button which adds a new widget. This widget can be deleted again also.
All this is working properly. But when you click the header it should trigger a sliding box. But this sliding box doesn't work on newly added widget, only on the widgets that were there from the start.
HELP!!!!
See this fiddle:
http://jsfiddle.net/ygAV2/
I suspects the:
addbox part
//add box
$('.addbox').on("click", function() {
gridster.add_widget('<li data-row="1" data-col="1" data-sizex="2" data-sizey="1"><div class="box"><div class="menu"><header class="box_header"><h1>HEADER 5</h1></header><div class="deleteme">delete me ;(</div></div></li>', 2, 1)
});
and the sliding box part:
// widget sliding box
$("h1").on("click", function(){
if(!$(this).parent().hasClass('header-down')){
$(this).parent().stop().animate({height:'100px'},{queue:false, duration:600, easing: 'linear'}).addClass('header-down');
} else{
$(this).parent().stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
}
});
$(document).click(function() {
if($(".box_header").hasClass('header-down')){
$(".box_header").stop().animate({height:'30px'},{queue:false, duration:600, easing: 'linear'}).removeClass('header-down');
}
});
$(".box_header").click(function(e) {
e.stopPropagation(); // This is the preferred method.
// This should not be used unless you do not want
// any click events registering inside the div
});

The use of .live() is deprecated. http://api.jquery.com/live/
So using the correct way, .on(event, selector, handler) on all your click events.
You will achieve your desired result.
Here is a code snippet
$(document).on("click", 'h1', function() {
if (!$(this).parent().hasClass('header-down')) {
$(this).parent().stop().animate({
height: '100px'
}, {
queue: false,
duration: 600,
easing: 'linear'
}).addClass('header-down');
} else {
$(this).parent().stop().animate({
height: '30px'
}, {
queue: false,
duration: 600,
easing: 'linear'
}).removeClass('header-down');
}
});
and here
//remove box
$(document).on('click', ".deleteme", function () {
$(this).parents().eq(2).addClass("activ");
gridster.remove_widget($('.activ'));
$(this).parents().eq(2).removeClass("activ");
});
and also here
$(document).on("click", ".box_header", function (e) {
e.stopPropagation(); // This is the preferred method.
// This should not be used unless you do not want
// any click events registering inside the div
});
I have updated your jsfiddle: http://jsfiddle.net/ygAV2/2/

hover out function

jQuery("#markets_served").hover(function(){
jQuery.data(document.body, "ms_height", jQuery(this).height());
if(jQuery.data(document.body, "ms_height") == 35) {
jQuery(this).stop().animate({height:'195px'},{queue:false, duration:800, easing: 'easeOutQuad'});
jQuery("#btn_ms_close").css("display","inline");
}
});
jQuery("#btn_ms_close").hover(function(){
jQuery.data(document.body, "ms_height", jQuery("#markets_served").height());
jQuery("#markets_served").stop().animate({height:'35px'},{queue:false, duration:800, easing: 'easeOutQuad'});
jQuery(this).css("display","none");
});
Problem with hovering out. It wont work. It wont hover out when the mouse is out of the content that appears on hover.
http://uscc.dreamscapesdesigners.net/ - example at the bottom " Markets Covered"

Take a look at the hover declaration on the jQuery site. You can specify a handler for the mouseover and mouseout event in one swoop. No need to calculate heights or bind another handler to a new div that appears.
$("#markets_served").hover(
function () {
//do this when over
},
function () {
//do this when out
}
);

Use is like:
$('#el').hover(function(e) { /* hover; */ }, function(e) { /* unhover */ });
here is documentation

Or simplier without data:
jQuery("#markets_served").hover(function() {
jQuery(this).stop().animate({height:'195px'},{queue:false, duration:800, easing: 'easeOutQuad'});
jQuery("#btn_ms_close").css("display","inline");
}, function() {
jQuery(this).stop().animate({height:'35px'},{queue:false, duration:800, easing: 'easeOutQuad'});
jQuery("#btn_ms_close").css("display","none");
});

When mouse comes in you increase the height of the div but you dont reset it when mouse is outside the div hence the issue.
You should do something like this:
jQuery("#markets_served").hover(
function(){
jQuery.data(document.body, "ms_height", jQuery(this).height());
if(jQuery.data(document.body, "ms_height") == 35) {
jQuery(this).stop().animate({height:'195px'},{queue:false, duration:800, easing: 'easeOutQuad'});
jQuery("#btn_ms_close").css("display","inline");
} ,
function(){
jQuery.data(document.body, "ms_height", jQuery("#markets_served").height());
jQuery(this).stop().animate({height:'35px'},{queue:false, duration:800, easing: 'easeOutQuad'});
jQuery("#btn_ms_close").css("display","none");
}
});

Using hover and click with jQuery UI tabs?

I am using the following code for my jQuery UI tabs:
$('#tabs').tabs({
fx: { opacity: 'toggle', duration: 400 }}).tabs('rotate', 1000);
$("#tabs").hover(function() {
$("#tabs").tabs("rotate",0);
},
function() {
$("#tabs").tabs("rotate",1000);
});
$("#tabs").click(function() {
$("#tabs").tabs('rotate', 0);
});
The tabs are rotating properly and the rotation stop when hovering with the mouse. However, the 'hover' function is also overriding the 'click' function. How can I achieve a pause when hovering, and a complete stop to the rotation on click?

Try this
$('#tabs').tabs({
fx: { opacity: 'toggle', duration: 400 }
}).tabs('rotate', 1000);
$("#tabs").hover(
function() {
$("#tabs").stop();
},
function() {
$("#tabs").tabs("rotate",1000);
}
);
$("#tabs").click(
function() {
$("#tabs").stop(true);
}
);

just a week ago i looked for the same issue. Now i created an extesion: Pause on Hover for jQuery UI Tabs Rotate