I have two elements that shouldn't be active at the same time, so when one is toggled I fade the other out, however I would like to be able to fade the open element out and then bring the other one in. Is there a way to do this that isn't a hack?
<script ="text/javascript">
$(function() {
$('#jlogin').click(function() {
$('#login').toggle('fast');
$('#reg').fadeOut('fast');
});
$('#jreg').click(function() {
$('#reg').toggle('fast');
$('#login').fadeOut('fast');
});
});
</script>
That is my current script.
Look at using the callback mechanism for fadeOut so you can chain the animations. The callback on the animation methods are called after the previous animation is complete.
<script type="text/javascript">
$(function() {
$('#jlogin').click(function() {
$('#reg').fadeOut('fast', function() {
$('#login').toggle('fast');
});
});
$('#jreg').click(function() {
$('#login').fadeOut( 'fast', function() {
$('#reg').toggle('fast');
});
});
});
</script>
Related
I know this might be silly but I would like to know if there is a way to realize.
Basically, I would like the dropdown-content element to 'KEEP DISPLAYING' even after 3 secs of mouse moving-out of the parental 'dropbtn' button or element.
E.g. code:
$(function() {
$('#dropbtn').hover(function() {
$('.dropdown-content').css('display', 'block');
}, function() {
// on mouseout:
setTimeout(function(){$('.dropdown-content').css('display', 'none');}, 3000);
});
$('.dropdown-content').hover(function(){
$('.dropdown-content').css('display', 'block');
},function(){
$('.dropdown-content').css('display', 'none');
})
});
Current issue is that setTimeout() function is overriding my desired way on this particular line of JS code:
$('.dropdown-content').css('display', 'block');
In another word, I want setTimeout() to be effective if and only if I set not my mouse cursor on 'dropdown-content' div.
Hope someone can help out :)
Instead of using hover, you could use mouseenter/mouseleave to 'toggle' the .dropdown-content, except the delay of 3s on mouseleave:
$(function() {
var dropdownTimeout = null;
$('#dropbtn').mouseenter(function() {
if(dropdownTimeout) {
clearTimeout(dropdownTimeout);
dropdownTimeout = null;
}
$('.dropdown-content').css('display', 'block');
});
$('#dropbtn').mouseleave(function() {
dropdownTimeout = setTimeout(function(){$('.dropdown-content').css('display', 'none');}, 3000);
});
});
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);
});
}
What's wrong with this code? Probably a lot cus I'm new to jquery. I'm trying to fadeIn the page then fade the background to a different one the fade up and in the nav and set it up so the links will fade the page out and bring in the new page. The code I have now isn't quite working and I think some syntax and formatting is the problem.
$(document).ready(function() {
$('body').fadeIn(1500);
});
$('#background').addClass('background');
setTimeout(function() {
$('#background').addClass('background-blured');
}, 1500);
$("h1").delay(2000).animate({
top: -50,
opacity: 1,
}, 700, function() {
// Animation complete.
});
$('.link').click(function() {
event.preventDefault();
newLocation = this.href;
$('body').fadeOut(500, newpage);
});
function newpage() {
window.location = newLocation;
}
});
Thanks!
$(document).ready triggers as soon as the DOM is fully loaded. Any javascript outside of the $(document).ready block is run while the browser is still loading the page. so if your $('#background') element is not yet loaded to the DOM jQuery cannot add the 'background' class to it. And more than likely only some of your $('.link') elements will have the click event listener added since they weren't yet loaded when the javascript ran. That's why you should embed such things inside the $(document).ready function.
$(document).ready(function() {
$('body').fadeIn(1500);
$('#background').addClass('background');
setTimeout(function() {
$('#background').addClass('background-blured');
}, 1500);
$("h1").delay(2000).animate({
top: -50,
opacity: 1,
}, 700, function() {
// Animation complete.
});
$('.link').click(function() {
event.preventDefault();
newLocation = this.href;
$('body').fadeOut(500, newpage);
});
});
function newpage() {
window.location = newLocation;
}
Notice with proper indentation you can easily see what is inside the $(document).ready function. Also notice you don't put standard functions like your newpage() function inside the $(document).ready.
Here's my jsfiddle. The script itself is here:
$(function () {
$(".div1, .div2").hide();
$(".link1, .link2").bind("click", function () {
$(".div1, .div2").hide();
if ($(this).attr("class") == "link1")
{
$(".div1").show();
}
else
{
$(".div2").show();
}
});
});
How can I add smooth fadein effect when one div disappears and the other one shows up? Thanks!
$(".div1").fadeIn();
$(".div2").fadeOut();
Running example:
$(function () {
$(".div1, .div2").hide();
$(".link1, .link2").bind("click", function () {
var e = $(this);
$(".div1, .div2").fadeOut().promise().done(function() {
if (e.attr("class") == "link1"){
$(".div1").fadeIn();
} else {
$(".div2").fadeIn();
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Link 1
Link 2
<div class="div1">I'm div1</div>
<div class="div2">I'm div2</div>
The promise() is used to avoid the collision between fadeOut and fadeIn transitions
It looks like you need the fadeIn() method from jQuery, as explained in the docs:
The .fadeIn() method animates the opacity of the matched elements. It is similar to the .fadeTo() method but that method does not unhide the element and can specify the final opacity level.
if ($(this).attr("class") == "link1") {
$( "#div1" ).fadeIn( "slow", function() {
// Animation complete
});
} else {
$( "#div2" ).fadeIn( "slow", function() {
// Animation complete
});
}
Instead of slow you can also use a number for indicating the fade-in time, in milliseconds.
updated your fiddle.
simply replace show() with fadeIn()
http://jsfiddle.net/cEJtA/572/
<script>
$("#menu-item-58").mouseover(function() { $("#simple_sidenav-3").css('visibility','visible'); });
$("#menu-item-58").mouseout(function() { $("#simple_sidenav-3").css('visibility','hidden'); });
</script>
#simple_sidenav-3 {
visibility:hidden;
}
simple_sidenav-3 is a hidden div.
So why doesn't it show when mouse is over #menu-item-58?
Please check it here http://mentor.com.tr/wp/?page_id=164
try this instead:
jQuery("#menu-item-58").mouseover(function() {
jQuery("#simple_sidenav-3").css('visibility','visible');
});
$ is undefined.
You haven't wrapped your code in the jQuery DOM ready function. Put this between your <script> tags:
$(document).ready(function()
{
$("#menu-item-58").mouseover(function() { $("#simple_sidenav-3").css('visibility','visible'); });
$("#menu-item-58").mouseout(function() { $("#simple_sidenav-3").css('visibility','hidden'); });
}
This will bind the mouse events to the elements when the document (page) has been loaded.
Try changing #simple_sidenav-3 from visibility:hidden; to display:none; Then call something like .slideDown() for a nice effect.
Also, here's some improvements to your code:
jQuery(function() { //waits till the document is ready
jQuery("#menu-item-58").mouseover(function () {
jQuery("#simple_sidenav-3").slideDown();
}).mouseout(function () { //no need to use $("#menu-item-58") twice
jQuery("#simple_sidenav-3").slideUp();
});
});