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();
});

Hide div after being shown

I have some code that shows a div with a message in it when button is clicked. I want the div to disappear after a few seconds.
I have tried to achieve this adding $(this).delay().hide(500); in the .notify function but it doesn't work.
$.fn.notify = function(settings_overwrite) {
settings = {
placement: "top",
default_class: ".message",
delay: 0
};
$.extend(settings, settings_overwrite);
$(settings.default_class).each(function() { $(this).hide(); });
$(this).show().css(settings.placement, -$(this).outerHeight());
obj = $(this);
if (settings.placement == "bottom") {
setTimeout(function() { obj.animate({ bottom: "0" }, 500) }, settings.delay);
}
else {
setTimeout(function() { obj.animate({ top: "0" }, 500) }, settings.delay);
}
}
/** begin notification alerts
-------------------------------------**/
$(document).ready(function($) {
$('.message').on('click', (function() {
$(this).fadeTo('slow', 0, function() {
$(this).slideUp("slow", function() {
$(this).remove();
});
});
}));
});
$(document).ready(function() {
if (document.location.href.indexOf('#notify_success') > -1) {
$("#notify_autopop").notify({
delay: 500
});
}
});

You can use setTimeout function
You have to store the divobj in a variable and then use it inside the setTimeout function
$('div').click(function(){
//show the message
var divObj = $(this);
setTimeout(function(){
divObj.hide();
},3000);
});
check the fiddle link
https://jsfiddle.net/uujf8hmq/

You can write your code to hide the div in the 2nd argument of show() methos which is a complete callback. You need to hide() the element in this callback. You can put necessary timeout before hide().

You can use CSS3 animation/transition instead of jquery's animation. and you can use setTimeout to fade message after sometime.
See the below code
JS
$.fn.notify = function(message, settings_overwrite){
var settings = {
placement:"top-left",
delay: 2000
};
$.extend(settings, settings_overwrite);
var $this = $(this);
$this.removeClass('bottom-left top-left');
$this.text(message);
$this.addClass(settings.placement + ' display');
$this.on('click', function(){
$this.removeClass('display');
});
setTimeout(function(){
$this.removeClass('display');
}, settings.delay);
}
$(document).ready(function ($) {
$('body').on('click', '.create-message', function(){
$('.message').notify($('#msg').val(), {
placement: $('#pos').val()
});
});
});
HTML
Position :
<select id="pos">
<option value="top-left" selected>Top Left</option>
<option value="bottom-left">Bottom Left</option>
</select>
<br/>
<textarea id="msg"></textarea>
<br/>
<button class="create-message">show message</button>
<div class="message"></div>
CSS
.message{
position: fixed;
width: 100px;
height: 50px;
background: green;
color: white;
padding: 3px;
border-radius: 3px;
opacity: 0;
-webkit-transition: opacity 1s;
transition: opacity 1s;
}
.message.display {
opacity: 1;
}
.message.top-left {
top: 10px;
right: 10px;
}
.message.bottom-left {
bottom: 10px;
right: 10px;
}
jsfiddle link - http://jsfiddle.net/jigardafda/ac5wyfo9/3/

Usually we do not use $(document).ready(function() {....}(); twice on a single page.
Try writing code to hide the div inside the same $(document).ready(function() {.....}() after the .show() function.
You can use either .hide() or setTimeout() functions to hide the div.

Passing an HTML Element into a Javascript Function

I know this has been answered, but it seems that none of the questions are relevant to exactly my point.. My code is below. I need to pass in either the variable $dynamicPanel in to the second function, or pass this in to the second function. Either way would be acceptable.
While we're at it, is there any way that I can wait some number of seconds to execute the FirstAnimation function without again using the animate() method.
$(document).ready(function FirstAnimation() {
var $dynamicPanel = $(".dynamicPanel");
$('.dynamicPanel').animate({
opacity: 0,
left: '100'
}, 5000, function () {
alert('first animation complete');
SecondAnimation(this);
});
});
function SecondAnimation(this) {
$(this).animate({
opacity: 1
}, 100, function () {
alert('second animation complete');
FirstAnimation();
});
};

this is a reserved word and can't be used as a parameter name. You should do this:
$(document).ready(function(){
FirstAnimation();
});
function FirstAnimation() {
//this function doesn't change, use your code
};
function SecondAnimation(elem) {
$(elem).animate({
opacity: 1
}, 100, function () {
alert('second animation complete');
setTimeout(function(){ //Delay FirstAnimation 7 seconds
FirstAnimation();
}, 7000);
});
};
Hope this helps. Cheers

What about changing SecondAnimation(this); to SecondAnimation($dynamicPanel);? It looks like it would do what you want.

Use SecondAnimation.apply(this).

this waiting can be done with jQuery.delay()
$(document).ready(function FirstAnimation() {
var $dynamicPanel = $(".dynamicPanel");
$dynamicPanel.animate({
opacity: 0,
left: '100'
}, 5000, function () {
alert('first animation complete');
SecondAnimation($dynamicPanel); // <--pass the proper variable ;)
});
});
function SecondAnimation(this) {
$(this).delay(5000).animate({ //<<-- wait five seconds
opacity: 1
}, 100, function () {
alert('second animation complete');
FirstAnimation();
});
};
however you can call the whole function recursive and pass the animation settings as paramaters from an array. So you reuse the function and only change the behaviour.
// store animationsettings in an array;
var animationSettings = [{opacity: 0, left: '100'},{ opacity: 1 }];
// initialize the startup index
var x = 1;
// cache selector
var $dynamicPanel = $(".dynamicPanel");
// single function
(function animate(){
x = x == 1 ? 0 : 1;//<--- toggle the index
$dynamicPanel.delay(x * 5000).animate(animationSettings[x],
1000,
function () {
animate(); // recursive call this function.
});
}());
fiddle here

is it possible to apply smoothing effect to a function - jquery

i am building scroll panel of images like jquery image gallery but only thumb icon part,
this is my code,,,
function moveRight() {
var imli = $(".thumbStrip li:first-child");
$(".thumbStrip").append(imli);
}
function moveLeft() {
var imli = $(".thumbStrip li:last-child");
$(".thumbStrip").prepend(imli);
}
i want to apply smoothing effect while append or prepend,,
is it possible??
how?

You mean something like this:
function moveRight() {
$(".thumbStrip li:first-child").fadeOut(function() {
$(this).appendTo(".thumbStrip").fadeIn();
});
}
?
Or maybe:
function moveRight() {
$(".thumbStrip li:first-child").animate({
width: 'toggle',
opacity: 'toggle'
}, function() {
$(this).appendTo(".thumbStrip").animate({
width: 'toggle',
opacity: 'toggle'
});
});
}
DEMO

whether can combine jquery each function?

jQuery(document).ready(function(){
$(function() {
$('.button-a').each(function() {
$(this).hover(
function () {
$('.button-title', this).animate({ opacity: 0.6 }, 200);
});
});
});
$(function() {
$('.button-b').each(function() {
$(this).hover(
function () {
$('.button-title', this).animate({ opacity: 0.6 }, 200);
});
});
});
$(function() {
$('.button-c').each(function() {
$(this).hover(
function () {
$('.button-title', this).animate({ opacity: 0.6 }, 200);
});
});
});
$(function() {
$('.button-d').each(function() {
$(this).hover(
function () {
$('.button-title', this).animate({ opacity: 0.6 }, 200);
});
});
});
});
I have many buttons, when hover each, there will have some opacity change.
The codes are similar, the small different is $('.button-a'),$('.button-b'),$('.button-c'),$('.button-d'), whether can combine jquery each function? so that I can shorter my code? Thanks.

You can use the multiple-selector[docs] .
$(function() {
$('.button-a,.button-b,.button-c,.button-d').hover(function () {
$('.button-title', this).animate({ opacity: 0.6 }, 200);
});
});

Two simplifications:
var fn = function() {
$(this).hover(
function () {
$('.button-title', this).animate({ opacity: 0.6 }, 200);
}
});
});
jQuery(document).ready(function() {
$('.button-a').each(fn);
$('.button-b').each(fn);
$('.button-c').each(fn);
$('.button-d').each(fn);
});
You can shorten the on-ready call too:
var fn = function() {
$(this).hover(
function () {
$('.button-title', this).animate({ opacity: 0.6 }, 200);
}
});
});
$(function() {
$('.button-a').each(fn);
$('.button-b').each(fn);
$('.button-c').each(fn);
$('.button-d').each(fn);
});
And you can merge selectors:
var fn = function() {
$(this).hover(
function () {
$('.button-title', this).animate({ opacity: 0.6 }, 200);
}
});
});
$(function() {
$('.button-a, .button-b, .button-c, .button-d').each(fn);
});
Now, you don't really need .each, as .hover will automatically apply to each element given by the selector:
$(function() {
$('.button-a, .button-b, .button-c, .button-d').hover(function () {
$('.button-title', this).animate({ opacity: 0.6 }, 200);
});
});
Take your pick!

I don't see anything different about these functions, opacity included. But you can group selectors in the jQuery call, like:
$('.button-a,.button-b,.button-c,.button-d')...
You can also use jQuery.add() if you don't have the selectors initially, but want to add them to the chain later on. e.g.
$('.button-a,.button-b,.button-c').add('.button-d')

Yes, use the multiple selector.
$('.button-a,.buttcon-b,.button-c,.button-d');

All you need is:
$('.button-a, .button-b, .button-c, .button-d').each(function() {
$(this).hover(function() {
$('.button-title', this).animate({ opacity: 0.6 }, 200);
});
});
As I said in a comment, it's not necessary to use
$(function() {
// code code code ...
});
all the time. You've already got everything inside a "ready" handler.