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
Related
$(".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>
I have next function:
function clearWorkingArea() {
$('.extensionText').children('span').fadeOut(600, function() { $(this).remove() });
$('ul.texts').fadeOut(600, function() { $(this).empty() });
$('.buttonsDiv').fadeOut(600, function() { $(this).remove() });
$('.processingDiv').fadeOut(600, function() { $(this).remove() });
}
I would like to call another function only after all animations in this function are finished.
I tried :
$.when(clearWorkingArea()).done(function() {...});
Also:
clearWorkingArea().promise().done(function() {...});
No luck, it is still not working properly.
Is there is a way, instead of callback hell of fades, to do such function behavior?
Update: just double checked jquery, animations can return a promise. I initially just did promise, but to get a promise with jquery you do promise(). So you don't need the helper function after all.
Below is an example.
Also if you have multiple selectors doing the same thing, you can combine.
eg. below .two & .three fadeOut at 600ms, but I've made .one fadeOut over 1000ms. Also added a none-existent selector to make sure things still work.
Promise.all(
[
$('.one').fadeOut(1000, function () {
$(this).empty(); }).promise(),
$('.two,.three').fadeOut(600, function () {
$(this).empty(); }).promise(),
$('.not-exist').fadeOut(600, function () {
$(this).empty(); }).promise()
]
).then(function () {
console.log('all done');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one">
Three 1000 ms
</div>
<div class="two">
One 600 ms
</div>
<div class="three">
Two 600 ms
</div>
clearWorkingArea only starts the animations, but these animations are all async.
At the end of clearWorkingArea, your animations are unlikely to be over.
You have to fetch a promise for each animation and then use Promise.all to trigger your code when all promises are over.
According to the documentation, you can get the promise by using the start parameter in the options of fadeOut like methods:
jQuery fadeOut()
Hope this helps!
How about we apply some simple logic like this.
function doWorkWhenAllFinished(counter) {
if (counter == 4) {
//All fade animations have been complete.
//Good to go...
}
}
function clearWorkingArea() {
var counter = 0;
$('.extensionText').children('span').fadeOut(600, function() {
counter++;
$(this).remove();
doWorkWhenAllFinished(counter);
});
$('ul.texts').fadeOut(600, function() {
counter++;
$(this).empty();
doWorkWhenAllFinished(counter);
});
$('.buttonsDiv').fadeOut(600, function() {
counter++;
$(this).remove();
doWorkWhenAllFinished(counter);
});
$('.processingDiv').fadeOut(600, function() {
counter++;
$(this).remove();
doWorkWhenAllFinished(counter);
});
}
I want to do a simple function in Jquery: when a button is clicked show the input text, when it's clicked again- hide the input text.
<div>
<div id="btnNewGroup">New Group</div>
<input type="text" id="newGroup" style="display:none" />
</div>
and this is the scrupt section:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
if ($("#newGroup").hide()) {
$("#newGroup").show();
}
else {
$("#newGroup").hide()
}
});
});
when I click the button the text input is showing, when I click it again I want the input text to be hidden, but nothing happens.
You can use toggle() to show / hide
Live Demo
$("#btnNewGroup").click(function () {
$("#newGroup").toggle();
});
The problem with the condition you have is that you are hiding the element instead of checking if it is hidden. You can is with :hidden like is(':hidden') to check if element is hidden.
if ($("#newGroup").is(':hidden')) {
$("#newGroup").show();
else
$("#newGroup").hide();
if ($("#newGroup").hide())
The hide function does not return a boolean value so you can't use it in an if statement. It returns a jQuery object which is always true so your second block never gets hit.
You can try two things:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
if ($("#newGroup").is(":visible")) {
$("#newGroup").hide();
}
else {
$("#newGroup").show()
}
});
});
Or a simple toggle:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
$("#newGroup").toggle();
});
});
Additionally, when working with selectors multiple times it's a good idea to cache the element - otherwise jQuery tries to find the element each time you try:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
var $newGroup = $("#newGroup"); // Cache it here
if ($newGroup.is(":visible")) {
$newGroup.hide();
}
else {
$newGroup.show()
}
});
});
use .toggle() for hide and show alternatively in jquery
$("#btnNewGroup").click(function () {
$("#newGroup").toggle();
});
Demo
Use .toggle() function
$("#btnNewGroup").click(function () {
$("#newGroup").toggle()
});
Or use :visible pseudo selector with is()
Demo
$(document).ready(function () {
$("#btnNewGroup").click(function () {
if ($("#newGroup").is(":visible")) {
$("#newGroup").hide();
}
else {
$("#newGroup").show()
}
});
});
Note :hide() function does not return boolean value. Use is(:visible) or is(:hidden)
You need to change
if ($("#newGroup").hide()) {
to (just one possible solution)
if ($("#newGroup").css('display')=='none') {
Because $("#newGroup").hide() will always return true.
And here are the full code:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
if ($("#newGroup").css('display')=='none') {
$("#newGroup").show();
}
else {
$("#newGroup").hide()
}
});
});
Have a look at the .toggle() function within the API.
http://api.jquery.com/toggle/
document.getElementById("username").style.display='block';
I have the following code http://jsfiddle.net/largan/2n2Lf/25/
The idea is the div called soc_text to fade and fade out when hover on the soc_button div.
I have this script, but it doesn't seems to work.
$(document).ready(function()
{
$("div.soc_button").hover(
function () {
$("div.soc_text").fadeIn('slow');
},
function () {
$("div.soc_text").fadeOut('slow');
}
);
});
Any ideas?
Thanks
$(document).on("mouseover", "div.soc_button", function(){
$(this).find("div.soc_text").fadeToggle("slow");
});
Here's the answer:
$(document).ready(function () {
$("div.soc_button img").hover(
function () {
console.log();
$(this).parent().find('div.soc_text').fadeIn('slow');
},
function () {
$(this).parent().find('div.soc_text').fadeOut('slow');
}
);
});
I guess the code is self explanatory,
Regards
This applies the method to all matches with all div tags with soc_text css class
$("div.soc_text").fadeIn('slow');
Change this to
$(this).children('div.soc_text').fadeIn('slow');
I have a very simple function where after click body class fades out and replacing class.
$(".a").click(function () {
('body').fadeOut();
$('body').removeClass();
$('body').addClass("green");
$('body').fadeIn();
});
$(".b").click(function () {
$('body').fadeOut();
$('body').removeClass()
$('body').addClass("pink"),
$('body').fadeIn();
});
The problem I have is that the class is changing before the body will fade out which is opposite to what I am trying to achieve.
Any help much appreciated.
Thanks
Dom
The fadeOut method takes a callback to run after the fade finishes.
You can change the class in that callback:
$(".a").click(function () {
$('body').fadeOut(function() {
$('body').removeClass().addClass("green").fadeIn();
});
});
Use callback functions.
$(".a").click(function () {
('body').fadeOut(function(){
$('body').removeClass();
$('body').addClass("green");
$('body').fadeIn();
});
});
$(".b").click(function () {
$('body').fadeOut(function(){
$('body').removeClass()
$('body').addClass("pink"),
$('body').fadeIn();
});
});
$('body').fadeOut(function(){
$(this).removeClass().addClass("green").fadeIn();
});