We Keep Coding

jQuery fix click memorising

$(".fsb").on("click", function () {
if ($('.fsb').hasClass('fsbc')) {
$('#sfo p').fadeIn(500);
setTimeout(function () {
$('#sfo p').fadeOut(500);
}, 500);
} else {
$('#sfof p').fadeIn(500);
setTimeout(function () {
$('#sfof p').fadeOut(500);
}, 500);
}
});
After clicking many times on the button(fast), it will repeat hiding and unhiding that much times. I want to disable that but have no ideas.(sorry, I'm new to this).

jQuery allows to use .fadeIn() and .fadeOut() in chain without setTimeout().
To remove all queued animation place .stop(true) before them.
Inside the event handler, you can use $(this) to work on the clicked element.
$(document).ready(function() {
$(".fsb").on("click", function() {
if ($(this).hasClass('fsbc')) {
$('#sfo p').stop(true).fadeIn(500).fadeOut(500);
} else {
$('#sfof p').stop(true).fadeIn(500).fadeOut(500);
}
});
});
.hide-p p {
display: none;
}
<button class="fsb fsbc">Click SFO</button>
<button class="fsb">Click SFOF</button>
<div id="sfo" class="hide-p">
<p>SFO</p>
</div>
<div id="sfof" class="hide-p">
<p>SFOF</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

how to show two div one by one repeatedly

i am working on developing on an Html page where i have two div. In each div i have one image. I want that each image should be visible for 2 second and after that the second div should get visible. This function should get repeatedly. For this i used following code.
<script type="text/javascript">
$( document ).ready(function() {
$(".logo-outer").show();
setTimeout(function () {
$(".logo-outer").hide();
$(".logo-outernew").hide();
}, 2000);
});
</script>
But the above code is not working and image in not visible or invisible.

you can make use of SetInterval function instead of timeout function
below is example code , it might now working please check proper function . main point is make use of interval function
var myInterval = setInterval(function () {
if($(".logo-outer").is(':visible'))
{
$(".logo-outer").hide();
$(".logo-outernew").show();
}
else
{
$(".logo-outer").show();
$(".logo-outernew").hide();
}
},2000);
if you want to stop
clearInterval(myInterval);

setInterval(function () {
if ($(".logo-outer").css("display") == "none"){
$(".logo-outer").show();
}
else{
$(".logo-outer").hide();
}
}, 2000);
Every 2seconds it runs the functions and if logo outer is not visible it will show it, else if it's visible it will hide it.

I believe that you have also made an error in hiding the second image insted of displaying it (inside setTimeout):
$(".logo-outer").hide();
$(".logo-outernew").hide();
I believe the second one should be $(".logo-outernew").show();?

You can use the modulo (e.g. % sign) operator with a global variable to determine when hide or show your divs.
var count = 0;
$( document ).ready(function() {
$(".logo-outer").show();
setTimeout(function () {
if(count % 2 == 0) {
$(".logo-outer").hide();
$(".logo-outernew").show();
} else {
$(".logo-outer").show();
$(".logo-outernew").hide();
}
count++;
}, 2000);
});

By default hide your 2nd div and inside setTimeout hide your 1st dive and show your second div.
$(".logo-outer").show();
$(".logo-outernew").hide();
setTimeout(function () {
$(".logo-outer").hide();
$(".logo-outernew").show();
}, 2000);
.logo-outer {
background:red;
width: 50vw;
height: 50vw;
}
.logo-outernew {
background:green;
width: 50vw;
height: 50vw;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="logo-outer">
<h1>1 div</h1>
</div>
<div class="logo-outernew">
<h1>2 div</h1>
</div>

function swapImage() {
$('.img02').fadeOut();
$('.img01').fadeIn();
setTimeout(function () {
$('.img02').fadeIn();
$('.img01').fadeOut();
}, 2000);
setTimeout(function () {
swapImage();
},4000)
}
$(document).ready(function () {
swapImage();
});
.img01,
.img02{
width: 200px;
height: 200px;
position: absolute;
}
.img01{
background: green;
}
.img02{
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="img01"></div>
<div class="img02" style="display: none;"></div>

Remove the console and un-comment the lines with hide and show function
var time_to_display = 2000;
var img1 = setInterval(function () {
console.log("Img1");
// $(".logo-outer").hide();
// $(".logo-outernew").show();
}, time_to_display * 2);
setTimeout(function(){
var img2 = setInterval(function () {
console.log("Img2");
// $(".logo-outernew").hide();
// $(".logo-outer").show();
}, time_to_display * 2);
},2000);

You can simply change display for one div to none and use the following code it will hide and show
<script>
$(document).ready(function(){
setInterval(function(){
$("div.logo-outer, div.logo-outernew").toggle(1000);
}, 3000)
});
</script>

JQuery .slideUp() after time OR mouseleave

I got an element that is slided down by JQuery using .slideDown() method
$('#dropdown_shopping_cart').slideDown(800);
Now i want it to slide up after 6 seconds, but only if there is no hover on the element, if there is an hover, it should not .slideUp().
So far i worked with a timeout that added display:none to the element while i was giving the element´s hover display:block!important; in CSS so it would not get display: none until the hover is over.
JS
setTimeout(function () {
$('#dropdown_shopping_cart').css('display', 'none');
}, 6000);
_______________________________________________________
CSS
#dropdown_shopping_cart:hover {
display: block!important;
}
Now i want to add the .slideUp() to this.

Check this:
var myVar;
myVar = setTimeout(function() {
$('#dropdown_shopping_cart').slideUp(800)
}, 6000);
$("#dropdown_shopping_cart").hover(
function() {
clearTimeout(myVar);
},
function() {
myVar = setTimeout(function() {
$('#dropdown_shopping_cart').slideUp(800)
}, 6000);
}
);
By default shopping cart will slideUp() after 6 seconds, if mouse hover action occured, setTimeOut will be cleared, after mouse leave the shopping cart, setTimeOut will setted automatically

You can clear the timeout on mouseenter and reset it on mouseleave like this:
var hide_div_to;
function hideDiv(){
hide_div_to = setTimeout(function () {
$('#dropdown_shopping_cart').slideUp(800);
}, 6000);
}
$('#dropdown_shopping_cart').slideDown(800,hideDiv());
$('#dropdown_shopping_cart').mouseenter(function(){
clearTimeout(hide_div_to);
});
$('#dropdown_shopping_cart').mouseleave(function(){
hideDiv();
});
Here is a working JSFiddle
UPDATE
If you don't wan't to wait the timeout again when you leave, after the timeout is reached, you can do this:
$('#dropdown_shopping_cart').slideDown(800);
setTimeout(function () {
if(!$('#dropdown_shopping_cart').is(':hover')){
$('#dropdown_shopping_cart').slideUp(800);
}
else{
$('#dropdown_shopping_cart').mouseleave(function(){
$('#dropdown_shopping_cart').slideUp(800);
});
}
}, 3000);
And here is a JSFiddle and here is another one that shows how this can be triggered multiple times.

Id suggest you work with mouseover and a class:
$('#dropdown_shopping_cart').hover(function(){
if(!$('#dropdown_shopping_cart').hasClass('active'))
{
$(this).addClass('active');
}
else
{
$(this).removeClass('active');
}
},
function() {
var myVar = setTimeout(function() {
if(!$('#dropdown_shopping_cart').hasClass('active'))
{
$('#dropdown_shopping_cart').slideUp()
}
}, 6000);
})
And than in your setTimeout Function you add:

demo: http://jsfiddle.net/yo5gnvy3/7/
$('#dropdown_shopping_cart').hide().slideDown(800, function () {
var events = $._data($(this)[0], "events") || {};
if (events.mouseover === undefined) {
$(this).delay(1000).slideUp()
}
});

timeout hover delay on hover different div

I am trying to make the first square box onhover, then show the bigger box a little bit delay then when I move the mouse hover the big box, the big box still appears.However, my code works incorrectly.
If someone could please help me out? Thanks
Sample http://jsfiddle.net/9oLs3fyh/
var timeout;
$("#box1").hover(function () {
clearTimeout(timeout);
$("#box2").delay(500).show();
}, function () {
timeout = setTimeout(function(){
$("#box2").delay(500).hide();
},500);
});
if($("#box2").is(':hover')){
$("#box2").show();
}

var timeout;
$("#accountIcon").hover(function () {
clearTimeout(timeout);
$("#accountPopup").delay(500).show(500);
}, function () {
setTimeout(function(){
$("#accountPopup").delay(500).hide(500);
},500);
});
if($("#accountPopup").is(':hover')){
$("#accountPopup").show();
}
DEMO
I think this is a good way to achieve that by wrap your divs inside one div
<div class="conatiner">
<div id="accountIcon"></div>
<div id="accountPopup"></div>
</div>
.conatiner{
overflow:hidden;
}
var timeout;
$(".conatiner").hover(function () {
clearTimeout(timeout);
$("#accountPopup").delay(500).show(500);
}, function () {
setTimeout(function(){
$("#accountPopup").delay(500).hide(500);
},500);
});
DEMO HERE
and while you use hover .. you can just use css with visibility and transition delay
<div class="conatiner">
<div id="accountIcon"></div>
<div id="accountPopup"></div>
</div>
.conatiner:hover #accountPopup{
display: block;
-webkit-transition-delay: 1s; /* Safari */
transition-delay: 1s;
}
DEMO

Try assiging class hovered (check the DEMO):
CSS
.hovered { display:block }
On mouseenter of #accountIcon assign class hovered on #accountPopup element.
Then, on mouseleave, if the target element (#accountPopup) is not visisble, just remove the class.
$('#accountIcon').on('mouseenter', function() {
$('#accountPopup').addClass('hovered');
}).on('mouseleave', function() {
var target = $('#accountPopup');
if (!target.is(':visible')) {
target.removeClass('hovered');
}
});
$('#accountPopup').on('mouseleave', function() {
$(this).removeClass('hovered');
});

fadeToggle seems to make the hidden div jump up

Hello I have two divs that fadeToggle with a timer as follows
<div id="div1">Hello</div>
<div id="div2" style="display:none;">World</div>
Javascript to make it toggle
$(document).ready(function(){
setInterval(ToggleDiv, 5000);
});
function ToggleDiv(){
$('#div1').fadeToggle("slow");
$('#div2').fadeToggle("slow");
}
Here is fiddle link http://jsfiddle.net/BnYat/
My issue is that the second div shows up before the first div is done toggle and then causes a jump up to the top.
If there a way to create a smooth transition from one div to the next without the jump effect happening?

A simple solution is to put both div elements in a single container, and position them absolutely:
<div id="container">
<div id="div1">Hello</div>
<div id="div2" style="display:none;">World</div>
</div>
#container div {
position: absolute;
}
Example fiddle
Alternatively, you could fade one out completely then fade the next in in the callback:
setInterval(ToggleDiv, 5000);
function ToggleDiv(){
$('#div1').fadeToggle("slow", function() {
$('#div2').fadeToggle("slow");
});
}
Example fiddle

$(document).ready(function(){
setInterval(ToggleDiv, 5000);
});
function ToggleDiv(){
$('#div1').fadeToggle("slow", function(){
$('#div2').fadeToggle("slow");
});
}

just use animate
$( "#div1" ).animate({
visibility:hidden
}, 5000, function() {
// Animation complete.
});
$( "#div2" ).animate({
visibility:visible
}, 5000, function() {
// Animation complete.
});

Try this
setInterval(ToggleDiv, 5000);
function ToggleDiv() {
var div = "#" + $('div:visible').attr('id');
var div2 = "#" + $('div:not(:visible)').attr('id');
$(div).fadeToggle("slow", function () {
$(div2).fadeToggle("slow");
});
}
DEMO
or
function ToggleDiv() {
if ($('#div1').is(':visible')) {
$('#div1').fadeToggle("slow", function () {
$('#div2').fadeToggle("slow");
});
} else {
$('#div2').fadeToggle("slow", function () {
$('#div1').fadeToggle("slow");
});
}
}
DEMO