I'm trying to make it so that when you click a link, it removes a div (with some paragraphs and text) and inserts another div (with some paragraphs and some text). I'm using jQuery to fade those in and out. The fading out of the original div works when you click the link, and then I have a switch case to determine what gets faded in. However, the fadeIn, set to 'slow', appears to be occurring immediately.
Here's the relevant piece of code (the rest is just other cases):
$(document).ready(function() {
$('.nav-link').click(function() {
var linkClicked = $(this).attr("id");
$('.content').fadeOut('fast');
switch(linkClicked) {
case 'home':
console.log("linkClicked = "+linkClicked);
$('#home-content').fadeIn('slow', function() {
$(this).css("display", "inline");
$(this).css("opacity", 100);
});
break;
Edit:
So after changing fadeTo to fadeOut, and changing "slow" in the fadeOut to "fast", it worked well and transition the way I want. However, whenever I click "home" now it will move the div to a "block" position, (it spits it to the lower left corner) before shoving itself back into the right spot in the center of my container. It ONLY does this when I click home and no other of my sidenav links...which are all running the exact same code (home just is the first one in the switch case). Any ideas?
If you want the fadeIn to start after the fadeTo has completed, you'll want to use a callback function. Also, since you're fading to 0 opacity, just use fadeOut:
$(document).ready(function() {
$('.nav-link').click(function() {
var linkClicked = $(this).attr("id");
$('.content').fadeOut('slow', function() {
// this code will begin once fadeTo has finished
switch(linkClicked) {
case 'home':
console.log("linkClicked = "+linkClicked);
$('#home-content').fadeIn('slow', function() {
$(this).css("display", "inline");
$(this).css("opacity", 100);
});
break;
});
});
Without seeing your HTML, it's a little difficult to understand the exact outcome you're trying to achieve, but here is a JSfiddle with your code above.
http://jsfiddle.net/W9d6t/
$('.nav-link').click(function() {
var linkClicked = $(this).attr("id");
//$('.content').fadeTo('slow', 0);
switch(linkClicked) {
case 'home':
console.log("linkClicked = "+linkClicked);
$('#home-content').fadeIn('slow', function() {
$(this).css("display", "block");
alert('All done!');
});
}
});
From my understanding of what you are trying to do, I believe you simply need to do this:
$('#home-content').fadeIn('slow');
(the fadeIn function automatically sets the display property to inline/block)
Also, while your implementation correct, it's simpler to do:
$('.content').fadeOut('slow');
(simplified jsFiddle)
You just need to add a callback to fadeOut so that it executes after the animation is done:
$(document).ready(function() {
$('.nav-link').click(function() {
var linkClicked = $(this).attr("id");
$('.content').fadeOut('slow', function() {
switch(linkClicked) {
case 'home':
console.log("linkClicked = "+linkClicked);
$('#home-content').fadeIn('slow', function() {
$(this).css("display", "inline");
$(this).css("opacity", 100);
});
break;
});
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'm working on this website.
Here is the code for the menu trigger on the left sidebar:
jQuery(document).ready( function(){
jQuery('.nav-animate nav').hide('slide', 500);
jQuery('.nav-animate').hide();
jQuery(".x-btn-navbar").click(function(){
jQuery('#dimmer').fadeToggle(500);
jQuery('.nav-animate').fadeToggle(500);
jQuery('.nav-animate nav').toggle('slide', {direction: "left"}, 750);
// I am trying to show only the middle line when the navigation is closed
// and change the `.menu-p` text by checking whether the navigation has
// display:none or display:block, like this:
if(jQuery(".nav-animate").is(":visible")) {
jQuery("span.line.top").css('background-color', '#fff');
jQuery('span.line.bottom').css('background-color', '#fff');
jQuery('.menu-p').html('CLOSE')
}
// The above part works perfectly, however the part below doesn't:
if(!jQuery(".nav-animate").is(':visible')) {
alert('hidden');
jQuery('span.line.top').css('background-color', '#262628');
jQuery('span.line.bottom').css('background-color', '#262628');
jQuery('.menu-p').html('MENU');
}
});
});
I tried using if(jQuery(".nav-animate").is(":hidden")) {//...}, and if(jQuery(".nav-animate").css('display') == 'none') {//...} but both doesn't work.
My guess, when you click to "CLOSE" it does the :visible or :hidden check, but the menu is still open at the time you click so it still doesn't have the display:none until the click event performs that. In that case, what can I do?
Thanks in advance for your time and suggestions.
animation related methods will affect the visibility check, so check the state before call to toggle
jQuery(document).ready(function () {
jQuery('.nav-animate nav').hide('slide', 500);
jQuery('.nav-animate').hide();
jQuery(".x-btn-navbar").click(function () {
jQuery('#dimmer').fadeToggle(500);
//negate since fadetoggle will toggle the state
var visible = !jQuery('.nav-animate').stop().is(':visible');
jQuery('.nav-animate').fadeToggle(500);
jQuery('.nav-animate nav').toggle('slide', {
direction: "left"
}, 750);
// I am trying to show only the middle line when the navigation is closed
// and change the `.menu-p` text by checking whether the navigation has
// display:none or display:block, like this:
if (visible) {
jQuery("span.line.top").css('background-color', '#fff');
jQuery('span.line.bottom').css('background-color', '#fff');
jQuery('.menu-p').html('CLOSE')
} else {
// The above part works perfectly, however the part below doesn't:
alert('hidden');
jQuery('span.line.top').css('background-color', '#262628');
jQuery('span.line.bottom').css('background-color', '#262628');
jQuery('.menu-p').html('MENU');
}
});
});
Just add condition else on one your block condition right.. It's mean will be run if first condition block not true.
if(!jQuery('.nav-animate').stop().is(':visible')) {
jQuery("span.line.top").css('background-color', '#fff');
jQuery('span.line.bottom').css('background-color', '#fff');
jQuery('.menu-p').html('CLOSE')
}
else{
// to do
}
I have a function that hides and shows divs on scroll based on pageY position, but I also need the ability to have it automatically hide and show divs in order(only the ones with children), sort of like a fake animated Gif, looping forever.
I tried this:
function autoPlay() {
$('.conP').each(function(){
if ($(this).children().length > 0) {
setInterval(function(){
$(this).show().delay('100').hide();
},300);
}
});
}
which is not returning any errors, but it's not hiding or showing any of the divs with class="conP".
Any suggestions as to what I'm doing wrong/how I could improve this?
try this -
function autoPlay() {
$('.conP').each(function(){
if ($(this).children().length > 0) {
var $that = $(this);
setInterval(function(){
$that.show().delay('100').hide();
},300);
}
});
}
You have an incorrect reference to this in your setInterval closure. Refer to "How this works" in JavaScript Garden.
In your case you should save the reference to this in a variable:
$('.conP').each(function() {
var $element = $(this);
setInterval(function () {
$(element).show().delay('100').hide();
}, 300);
});
Or, better use the first argument passed to each, which is equal to $(this) in this case.
Not sure it's a great idea to run intervals inside loops, but I'm guessing the issue is scope inside the interval function :
function autoPlay() {
$('.conP').each(function(i, elem){
if ( $(elem).children().length ) {
setInterval(function(){
$(elem).show().delay(100).hide();
},300);
}
});
}
I really appreciate all the help guys, I seem to have figured out the animation part:
setInterval( function() {
autoPlay();
},120);
function autoPlay() {
var backImg = $('#outterLax div:first');
backImg.hide();
backImg.remove();
$('#outterLax').append(backImg);
backImg.show();
}
By hiding whichever div is first, and removing it from-then appending it back into-the containing div, and showing the new first div, it animates quite nicely!
I am quite new to writing my own jquery functions and I find debugging it very difficult as the error messages aren't too helpful when put into google.
I have a navigation menu for page anchors that when each one is clicked the screen scrolls to the anchor, the elements will change color depending on which one and the hover color will also change. Very simple really, I think.
The scrolling always works, the animate works occasionally and the hover works put usually I have to click the link twice. The return false only works on the first link you click.
This uses the scrollTo and animate-colors plugins.
Can anyone tell me what I'm doing wrong?
$(".scrolltoanchor").click(function() {
$('a').removeClass('selected');
$(this).addClass('selected');
$.scrollTo($($(this).attr("href")), {
duration: 750
});
switch ($(this).attr("id")) {
case 'personal':
$('.scrolltoanchor').animate({color: '#E4D8B8'});
$(".scrolltoanchor").hover(
function() {
$(this).css('color', 'blue');
},function(){
$(this).css('color', '#E4D8B8');
});
break;
case 'achievements':
$('.scrolltoanchor').animate({color: '#ffffff'});
$(".scrolltoanchor").hover(
function() {
$(this).css('color', 'red');
},function(){
$(this).css('color', '#ffffff');
});
break;
case 'skills':
$('.scrolltoanchor').animate({color: '#dddddd'});
$(".scrolltoanchor").hover(
function() {
$(this).css('color', 'orange');
},function(){
$(this).css('color', '#ffffff');
});
break;
}
return false;
});
Sorry to ask to be spoonfed, but I have followed what I believed to be the correct syntax from what I have learnt. Is there something I should know that is stopping this working as I expect?
EDIT: Sorry I forgot, I get this error on the (on average) every second click of a scrolltoanchor link
Uncaught TypeError: Cannot read property '0' of undefined
I can't spot a real pattern. Sometimes it seems to happen only on ones that havent been clicked before, sometimes not.
Thanks
You're taking the wrong approach.
You should bind the hover handlers once, and decide the colors based on which one was clicked.
Simplest way would probably to store the color data in a lookup table where the keys are the IDs of the elements.
var ids = {
personal: {
over:'blue',
out:'#E4D8B8'
},
achievements: {
over:'red',
out:'#ffffff'
},
skills: {
over:'orange',
out:'#dddddd'
}
};
var current = ids.personal;
Then bind the handlers once, and use the id of the one clicked to set the current color set.
var scroll_anchors = $(".scrolltoanchor");
scroll_anchors.hover( function() {
$(this).css( 'color', current.over );
},function(){
$(this).css( 'color', current.out );
});
scroll_anchors.click(function() {
$('a.selected').removeClass('selected');
$(this).addClass('selected');
$.scrollTo($($(this).attr("href")), { duration: 750 });
current = ids[ this.id ]; // set the current color set based on the ID
scroll_anchors.animate({ color: current.out });
return false;
});
When you call .hover() multiple times, you aren't removing the old event handlers, you are just adding a new one. Each handler will be called each time. You'll want to call .unbind("hover") first:
$(".scrolltoanchor").unbind("hover").hover(function () {
...
});
You can also bind to hover outside of the switch statement to eliminate some of the code duplication:
$(".scrolltoanchor").click(function () {
$('a').removeClass('selected');
$(this).addClass('selected');
$.scrollTo($(this.href), {
duration: 750
});
var off, on;
switch (this.id) {
case 'personal':
off = '#E4D8B8';
on = 'blue';
break;
case 'achievements':
off = '#ffffff';
on = 'red';
break;
case 'skills':
off = '#dddddd';
on = 'orange';
break;
}
$('.scrolltoanchor')
.animate({ color: off })
.unbind("hover")
.hover(function () {
$(this).css('color', on);
}, function () {
$(this).css('color', off);
});
return false;
});
Hopefully this is a simple request. I found this code that will work perfectly for what I want to do (Rotate through list items while fading in and out) http://jsfiddle.net/gaby/S5Cjm/1/ . However, I am looking to have the animation pause on mouse over and resume on mouse out. I am a novice at the moment with Javascript and JQuery, so any help would be appreciated.
Thanks.
EDIT: Side questions: Is there a benefit to using JQuery to do this? Would a stand alone script be more appropriate?
I attached the hover event to your list items. The over function stops the animation and all following animations using jQuery.stop(true). The out function resumes the animation:
http://jsfiddle.net/US4Fc/1/
var duration = 1000
function InOut(elem) {
elem.delay(duration).fadeIn(duration).delay(duration).fadeOut(
function() {
if (elem.next().length > 0) {
InOut(elem.next());
}
else {
InOut(elem.siblings(':first'));
}
});
}
$(function() {
$('#content li').hide().hover(
function() {
$(this).stop(true)
},
function() {
var curOp = Number($(this).css("opacity"));
$(this).fadeTo(duration*(1-curOp), 1, function() {
InOut($(this))
});
}
);
InOut($('#content li:first'));
});
Will this work for you?
$(function(){
var active;
$('#content li').hide().hover(
function(){
active = $(this).stop();
},
function(){
active && InOut(active);
}
);
InOut( $('#content li:first') );
});