$(".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>
Related
I'm trying to emulate the footer of a powerpoint presentation. So this is the code
$(function() {
$('.presentation').on({
mouseleave: function() {
setInterval(function () {
if(!$("input").is(":focus") && !$(".presentation:hover").length > 0 && !$('.bp-controls').hasClass('show')){
$('.bp-controls').fadeOut();
$('.bp-controls').removeClass('show');
}
}, 4000);
},
mouseenter: function() {
$('.bp-controls').fadeTo(500, 1, function() {
// Animation complete.
$('.bp-controls').addClass('show');
});
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="presentation">
<img src="Main.png" width="50%">
<div class="bp-controls"><input type="number" pattern="[0-9]*"></div>
</div>
I don't understand why setInterval works the first and maybe the second time when the document is ready but then it doesn't work anymore.
You are adding multiple intervals. You need to clear then when you leave. Should be a timeout also, I doubt you want to keep firing it.
$('.presentation').on({
mouseleave: function() {
this.timer = setTimeout(function () {}, 4000);
},
mouseenter: function() {
if (this.timer) window.clearTimeout(this.timer)
}
});
I have a bunch of divs like so
<div class="listingImage">
<div style="background-image:url('listings/listing1/1/image8Main.jpeg')"></div>
<div style="background-image:url('listings/listing1/1/image2.jpeg')"></div>
<div style="background-image:url('listings/listing1/1/image3.jpeg')"></div>
<div style="background-image:url('listings/listing1/1/image4.jpeg')"></div>
<div style="background-image:url('listings/listing1/1/image5.jpeg')"></div>
<div style="background-image:url('listings/listing1/1/image6.jpeg')"></div>
<div style="background-image:url('listings/listing1/1/image7.jpeg')"></div>
<div style="background-image:url('listings/listing1/1/image9.jpeg')"></div>
</div>
With css:
.listingImage>div: {
position:absolute;
z-index:98;
bottom:0;
right:0;
left:0;
top:0;
background:50% 50%/cover;
}
.listingImage>div.active {
z-index:99;
}
I have a jquery script to cycle through these divs and change the z-index to put one on top of all the rest.
<script>
var timer
$(".listingImage").on("mouseenter", function() {
var element = $(this)
timer = window.setTimeout(function() {
if (element.children(".active").length) {
element.children(".active").removeClass("active").next().addClass("active")
} else {
element.children().first().addClass("active")
}
}, 500)
})
$(".listingImage").on("mouseleave", function() {
$(".active", this).removeClass("active")
clearTimeout(timer)
})
</script>
This script will go to next div and stop working. I believe I have two problems. It might have something to do with var element=$(this). Also, my mouseleave is being triggered by changes in z-index. How can I achieve cycling through divs and then returning to normal onmouseleave? Any help is appreciated, thank you.
Task, on mouseenter, start cycle through boxes. On mouseleave, end cycle and restart
https://jsfiddle.net/sy5br7d0/
If you want to cycle through all the div's then u should use timer = window.setInterval rather than using window.setTimeout.
moidified script:
<script>
var timer
$(".listingImage").on("mouseenter", function() {
var element = $(this)
timer = window.setInterval(function() {
if (element.children(".active").length) {
element.children(".active").removeClass("active").next().addClass("active")
} else {
element.children().first().addClass("active")
}
}, 500)
})
$(".listingImage").on("mouseleave", function() {
$(".active", this).removeClass("active")
clearTimeout(timer)
})
</script>
User setInterval() instead of setTimeout()
var timer
$(".listingImage").on("mouseenter", function () {
var element = $(this)
timer = window.setInterval(function () {
if (element.children(".active").length>0) {
element.children(".active").removeClass("active").next().addClass("active")
} else {
element.children().first().addClass("active")
}
}, 500)
})
$(".listingImage").on("mouseleave", function () {
$(".active", this).removeClass("active")
clearInterval(timer)
})
Fiddle
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()
}
});
I'm not sure what to search for exactly but here is my issue.
<script>
function Gbox () {
var hide = document.getElementById('g-box').style.display = "none";
}
Gbox();
$("#g-plus").mouseover(function () {
$("#g-box").show(400);
});
$("#g-plus").mouseleave(function () {
$("#g-box").hide(400);
});
</script>
Said Jquery works without a problem.
Only issue is that if i hover in and out fast 2 times on #g-plus the Jquery runs it 4 times as in show,hide,show,hide and it looks retarded when it happens
How can i avoid this issue?
$("#g-plus").hover(function () {
$("#g-box").show(400);
},function () {
$("#g-box").hide(400);
});
What you need is .stop() to stop the previous animation
function Gbox() {
$("#g-box").hide();
}
Gbox();
$("#g-plus").hover(function () {
$("#g-box").stop().show(400);
}, function () {
$("#g-box").stop().hide(400);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="g-plus">g-plus</button>
<div id="g-box">g-box</div>
Note: You can use .hover() as a short cut to register the mouseenter and mouseleave handlers
I'm aware of the .delay() method, but I believe that only applies to adding animations to a queue.
What i am doing is making an animated 'wave' effect with css3 (adding and removing the class opaque).
I want the animation to have a delay, of say .3s in between, and when the entire each is done, it should keep looping. The animation should also begin in a 'stacked' way, so that not all of them fade in at once
This is what i tried to write so far but it does not work
<script type="text/javascript">
$(document).ready(function(){
$('.css-pineapple div').each(function(i) {
addO($(this));
});
});
function addO(element) {
setTimeout(function() {
element.addClass('opaque');
}, 800);
removeO(element);
}
function removeO (element) {
setTimeout(function() {
element.removeClass('opaque');
}, 500);
}
</script>
<div class="css-pineapple">
<div class="t1"></div>
<div class="t2"></div>
<div class="t3"></div>
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
<div class="b4"></div>
<div class="b5"></div>
<div class="b6"></div>
<div class="b7"></div>
<div class="b8"></div>
<div class="b9"></div>
<div class="b10"></div>
</div>
This is hard to answer without a fiddle or something more to look at, but try:
$(document).ready(function(){
Start($('.css-pineapple div'));
});
function Start(elem) {
elem.each(function(i, e) {
setTimeout(function() {
$(e).addClass('opaque');
setTimeout(function() {
$(e).removeClass('opaque');
if (i>=elem.length-1) Start($('.css-pineapple div'));
}, 500);
}, 800*i);
});
}
Try this:
(for each element increase the delay by 800.)
<script type="text/javascript">
$(document).ready(function(){
$('.css-pineapple div').each(function(i) {
addO($(this),800*i);
});
});
function addO(element,delay) {
setTimeout(function() {
element.addClass('opaque');
removeO(element);
}, delay);
}
function removeO (element) {
setTimeout(function() {
element.removeClass('opaque');
}, 500);
}
</script>