We Keep Coding

JQuery toggle function not loading on click, only on 3rd click

When I click the burger navigation I am trying to have the menu info drop down after the background fades in. But when I click the nav it doesn't work immediately. Only fading. After successive clicks it works. What am I doing wrong here? How can I get it working on the first click.
https://jsfiddle.net/mo16z57j/
// variables
var $header_top = $('.header-top');
var $nav = $('nav');
// toggle menu
$header_top.find('a').on('click', function() {
$(this).parent().toggleClass('open-menu');
$('.navOpen')
.css('opacity', 0).delay(800)
.slideDown('slow')
.animate(
{ opacity: 1 },
{ queue: false, duration: 'slow' }
).toggle();
});

Try the following code
$header_top.find('a').on('click', function() {
$(this).parent().toggleClass('open-menu');
$('.navOpen')
.css('opacity', 0).delay(800)
.show()
.slideDown('slow')
.animate(
{ opacity: 1 },
{ queue: false, duration: 'slow' }
).toggle();
});

Looping rotation on hover

I'm trying to make a few elements on my website rotate loopingly on hover. I've done it with css keyframe animation but when I mouse over or out, the element jumps uglingly.
So I'm trying to do it with some fancy jQuery (since I already have it loaded on my page) and I came across this very helpful stack which the answer explains how to loop with the hover. BUT the explanation is for movement. I managed to move it around with hover, but would be cool to rotate (maybe even both, if it can handle it).
Code for looping:
$.fn.loopingAnimation = function(props, dur, eas) {
if (this.data('loop') === true)
{
this.animate( props, dur, eas, function() {
if( $(this).data('loop') === true ) $(this).loopingAnimation(props, dur, eas);
});
}
return this; // Don't break the chain
};
$("#animate").hover(function(){
$(this).data('loop', true).stop().loopingAnimation({ 'margin-top': '50px'}, 500).loopingAnimation({'margin-top':'10px'},500);
}, function(){
$(this).data('loop', false).stop();
// Now our animation will stop after fully completing its last cycle
});
I then came across yet another stack which explains how to animate rotation with jQuery, but now I can't seem to be able to meld both codes together...
code for rotate:
$(document).ready(function (){
$({deg: 0}).animate({deg: 90}, {
duration: 2000,
step: function(now){
$("#rotate").css({
transform: "rotate(" + now + "deg)"
});
}
});
}
);
I made a pen with both codes to get things easier. Anyone knows how to do it?

How about the following?
function AnimateRotate(elt, d, duration, ondone){
$({deg: 0}).animate({deg: d}, {
easing: 'linear',
duration: duration,
step: function(now, fx){
$(elt).css({
transform: "rotate(" + now + "deg)"
});
},
complete: ondone.bind(elt)
});
}
$.fn.loopingRotation = function(msPerRotation) {
if (this.data('rotating') === true) // already rotating
return;
this.data('rotating', true);
AnimateRotate(this, 360, msPerRotation, function() {
if (this.data('rotating') !== true)
return;
this.data('rotating', false);
$(this).loopingRotation(msPerRotation);
});
}
$.fn.stopRotation = function() {
this.data('rotating', false);
}
$("#rotate").hover(function(){
$(this).loopingRotation(1000);
}, function(){
$(this).stopRotation();
});

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/

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

Jquery: everything works, but my function wont fire

Everything works just fine, but when I remove
{queue:false, duration: 800, easing: 'easeInOutQuart'}
from
$(".chapters_list").slideDown(
with a 500, it stops working. So if I don't want easing in my script, it will work fine, when I insert easing into the top function, like is shown below, it stops working. Why wont it allow me to have easing?
$('.article_book_title').click(function () {
if ($(".chapters_list").is(":hidden")) {
$(".chapters_list").slideDown({queue:false, duration: 800, easing: 'easeInOutQuart'}, function () {
doSlide($('UL.chapters_list li:first'))
});
} else {
$(".chapters_list").slideUp({queue:false, duration: 800, easing: 'easeInOutQuart'});
}
});
function doSlide(current) {
$(current).animate({
backgroundColor:'#d6f4aa', color:'#eee'
},40, function() {
$(this).animate({backgroundColor:'#252525', color:'#fff'}, 500)
doSlide($(current).next('li'));
});
}

The shortcut methods like slideUp dont take an object config as an argument.. they take the duration and the call back. If you want more advance options you have to use the animate method.
slideUp API