I have a problem with some jQuery fadeIn effect. This is actually on this website: website here. The problem appears when you select any option from the main menu and during page load up (menu is fading In) slide over the menu buttons. Then some of them (the one you were fading over) will not appear, or will appear slightly faded.
I have used this code for buttons:
HTML:
<nav>
<a id="b1" href="index.html"><span>01. <strong>ABOUT US</strong></span><div></div></a>
<a id="b2" href="webdesign.html"><span>02. <strong>WEBSITE DESIGN</strong></span><div></div></a>
<a id="b3" href="mobile-websites.html"><span>03. <strong>MOBILE WEBSITES</strong></span><div></div></a>
<a id="b4" href="captive-portals.html"><span>04. <strong>CAPTIVE PORTALS</strong></span><div></div></a>
<a id="b5" href="portfolio.html"><span>05. <strong>PORTFOLIO</strong></span><div></div></a>
<a id="b6" href="contact-us.html"><span>06. <strong>CONTACT US</strong></span><div></div></a>
</nav>
JQUERY:
$(document).ready(function(){
$("nav a").mouseenter(function () {
$('div', this).stop(true, false).animate({
'height': '65px'
}, 100);
$(this).stop(true, false).animate({
'padding-top': '5px'
}, 300);
}).mouseleave(function () {
$('div', this).stop(true, false).animate({
'height': '0px'
}, 300);
$(this).stop(true, false).animate({
'padding-top': '25px'
}, 500);
});
$('#b1, #b2, #b3, #b4, #b5, #b6, #b7').hide();
for (var i=1; i<99; i++) {
(function(i){
setTimeout(function() {
$('#b'+i).fadeIn(500);
}, 300+100*i);
})(i);
}
});
JS FIDDLE HERE:
http://jsfiddle.net/tucado/9hhZW/
(slide mouse over buttons while fading in and you will know what I mean).
Basically I want buttons to appear normally so the sliding mouse over them won't interrupt them in fading to 100%.
Thank you in advance for any solution for this problem.
Just return from your mouseenter and mouseleave handlers if the element is being animated, you can do that with .is(':animated') .
See working fiddle
UPDATE: My above solution will exit when the element is animating, but that also included the own animations of the mouseenter, mouseleave handlers, we want to only exit if it's the fadein animation, so to distinguish that I set a property called fading when starting to fading an element and remove it when it ends the fade effect, so we can check for this property in the mouseenter mouseleave handlers.
See new working fiddle
And I paste the code here:
$(document).ready(function(){
$("nav a").mouseenter(function () {
if ($(this).data('fading')) //EXIT IF WE ARE FADING
return;
$('div', this).stop(true, false).animate({
'height': '65px'
}, 100);
$(this).stop(true, false).animate({
'padding-top': '5px'
}, 300);
}).mouseleave(function () {
if ($(this).data('fading')) //EXIT IF WE ARE FADING
return;
$('div', this).stop(true, false).animate({
'height': '0px'
}, 300);
$(this).stop(true, false).animate({
'padding-top': '25px'
}, 500);
});
$('#b1, #b2, #b3, #b4, #b5, #b6, #b7').hide();
for (var i=1; i<99; i++) {
(function(i){
setTimeout(function() {
$('#b'+i).data('fading', true).fadeIn(500, function() {
$(this).data('fading', false);
});
}, 300+100*i);
})(i);
}
});
I think the problem is, that you stop the elements animation before they are initialized first (first fadeIn();)
I've created a fiddle for you using the fadeIn() callback to append the hover after showing first time:
$(document).ready(function(){
var appendHover = function () {
$("nav a").mouseenter(function () {
$('div', this).stop(true, false).animate({
'height': '65px'
}, 100);
$(this).stop(true, false).animate({
'padding-top': '5px'
}, 300);
}).mouseleave(function () {
$('div', this).stop(true, false).animate({
'height': '0px'
}, 300);
$(this).stop(true, false).animate({
'padding-top': '25px'
}, 500);
});
}
$('#b1, #b2, #b3, #b4, #b5, #b6, #b7').hide();
for (var i=1; i<99; i++) {
(function(i){
setTimeout(function() {
$('#b'+i).fadeIn(500, function() {appendHover();});
}, 300+100*i);
})(i);
}
});
http://jsfiddle.net/9hhZW/2/
Related
I have a grid layout and I am using jQuery to change what is displayed in each grid depending on which grid was clicked. At the moment I can click a grid and it changes and then if I click the same grid it goes back to the default but after their initial click If they happen to click in another grid it will trigger another function. I cannot hide the div's because I am using them to display content. I would like to only let one function be triggered at a time. Below is my code.
(function() {
var count = 0;
jQuery('#home-grid-one-two').click(function () {
count += 1;
jQuery('#home-grid-two-one').css({
'visibility': 'hidden'
});
jQuery('#home-grid-two-two').css({
'visibility': 'hidden'
});
jQuery('#home-grid-two-three').hide();
jQuery('#home-grid-three-two').css('background-image', 'url("A PICTURE")');
jQuery('#home-grid-three-two').css({
'background-size': 'cover'
});
jQuery('#home-grid-three-three').hide();
jQuery('#home-grid-two-two').css({
'margin-top': '-450px'
});
jQuery('#home-grid-three-two').css({
'margin-top': '-420px'
});
jQuery(".leftpara").show();
jQuery(".rightpara").show();
jQuery(".ptagexp").hide();
if (count == 2) {
jQuery('#home-grid-two-one').css({
'visibility': 'visible'
});
jQuery('#home-grid-two-two').css({
'visibility': 'visible'
});
jQuery('#home-grid-three-two').show();
jQuery('#home-grid-three-two').css('background-image', 'none');
jQuery('#home-grid-two-two').css({
'margin-top': '0px'
});
jQuery('#home-grid-three-two').css({
'margin-top': '0px'
});
jQuery('#home-grid-two-one').show();
jQuery('#home-grid-three-one').show();
jQuery('#home-grid-two-three').show();
jQuery('#home-grid-three-three').show();
jQuery(".leftpara").hide();
jQuery(".rightpara").hide();
jQuery(".ptagexp").show();
count = 0;
}
});
})();
(function() {
var count = 0;
jQuery('#home-grid-three-two').click(function () {
count += 1;
jQuery('#home-grid-one-one').css('background-image', 'url("A PICTURE")');
jQuery('#home-grid-one-one').css({
'background-size': 'contain',
'background-repeat': 'no-repeat',
'background-position': '50%'
});
jQuery('#home-grid-one-two').css('background-image', 'url("A PICTURE")');
jQuery('#home-grid-one-two').css({
'background-color': 'transparent',
'background-size': 'contain',
'background-repeat': 'no-repeat',
'background-position': '50%'
});
if (count == 2) {
jQuery('.home-grid').css('background-image', 'none');
jQuery('#home-grid-one-two').css('background-color', '#cccccc');
jQuery('#home-grid-two-one').css('background-color', '#cccccc');
jQuery('#home-grid-two-three').css('background-color', '#cccccc');
jQuery('#home-grid-three-two').css('background-color', '#cccccc');
jQuery('#home-grid-one-two').find('p').show();
jQuery('#home-grid-two-one').find('p').show();
jQuery('#home-grid-two-two').find('p').show();
jQuery('#home-grid-two-three').find('p').show();
jQuery('#home-grid-three-two').find('p').show();
count = 0;
}
});
})();
A simple solution would perhaps be to declare a global variable that keep tabs on when a function is running, and checking it before running other functions.
Just make them unclickable (should work in most browsers but I have not tested all) by adding and removing a couple of classes. (saves binding/unbinding which could get messy)
sample fiddle to play with: http://jsfiddle.net/MarkSchultheiss/3mLzx3o7/
Example html:
<div class="mygrids active">one</div>
<div class="mygrids">two</div>
<div class="mygrids">three</div>
<div class="mygrids">four</div>
<div class="mygrids">five</div>
<div id='showactive'>active:<span>none</span></div>
Sample CSS
.mygrids.inactive { pointer-events: none; }
.mygrids.active { pointer-events: auto;
border: solid lime 1px;}
sample code
$('.mygrids').on('click',function(){
$('#showactive>span').text($(this).text());
if ($(this).hasClass('active')){
$(this).removeClass('active');
$(this).siblings().removeClass('inactive');
}
else{
$(this).addClass('active');
$(this).siblings().addClass('inactive');
}
});
$('.mygrids').not('.active').addClass('inactive');
i already made the usual buttons but i need to make the search button on the left menu on this website
http://www.coolwebmasters.com/
when i hover on the #profilename it disappears
<div id="container">
<div class="prof"><a href="index.php"><img src="imgs/profile.png" alt="Messages"/>
</a></div>
</div>
<div id="profilename">Name</div>
$(".prof").hover(function(){
$('#profilename').show('slide', {direction: 'left'}, 280);
}, function() {
$('#profilename').hide('slide', {direction: 'left'}, 280);
});
It is because when you move the mouse out of the .prof element, the #profilename is hidden.
Try
jQuery(function ($) {
$('.prof').hover(function () {
var $target = $('#profilename');
clearTimeout($target.data('hoverTimer'));
$target.stop(true, true).show('slide', {direction: 'left'}, 280);
}, function () {
var $target = $('#profilename');
var timer = setTimeout(function () {
$target.stop(true, true).hide('slide', {direction: 'left'}, 280);
}, 200);
$target.data('hoverTimer', timer);
});
$('#profilename').hover(function () {
clearTimeout($(this).data('hoverTimer'));
}, function () {
$(this).stop(true, true).hide('slide', {direction: 'left'}, 280);
});
});
Demo: Fiddle
In the above solution, we give a 200ms time for the user to move from .prof to #profilename element, if so we clears the timeout thus the hiding of the element is prevented.
i'm currently trying to sort out a problem with the following script. When you hover over a certain area it should make the div appear pretty much instantly, then when you leave that area it should disappear after a set amount of time.
This all works like a charm but the problem is if you leave the browser page frame with the mouse after hovering over it, it bodges up and the div wont appear when you hover over it anymore.
Any help would be greatly appreciated, thank you
$('.loginHider').mouseenter(function(){
$('.loginBar').stop(true, true).animate({marginTop: '0px'}, 150);
$('#loggedIn').stop(true, true).animate({marginTop: '20px'}, 150);
}).mouseleave(function(){
setTimeout(function() {
$('.loginBar').stop(true, true).animate({marginTop: '-50px'}, 150);
$('#loggedIn').stop(true, true).animate({marginTop: '-30px'}, 150);
}, 1200);
});
~Matt
Try
$('.loginHider').mouseenter(function () {
//clear the existing timer
clearTimeout($(this).data('mouseTimer'))
$('.loginBar').stop(true, true).animate({
marginTop: '0px'
}, 150);
$('#loggedIn').stop(true, true).animate({
marginTop: '20px'
}, 150);
}).mouseleave(function () {
var timer = setTimeout(function () {
$('.loginBar').stop(true, true).animate({
marginTop: '-50px'
}, 150);
$('#loggedIn').stop(true, true).animate({
marginTop: '-30px'
}, 150);
}, 1200);
$(this).data('mouseTimer', timer);
});
I used the following javascript:
$('.slide-content #show-effect-1').hover(function(){
$(this).next().stop(true, true).fadeIn({ duration: _duration, queue: false }).css('display', 'none').show('slide', { direction: "down" }, _duration);
},
function() {
$(this).next().stop(true, true).fadeOut({ duration: _duration, queue: false }).hide('slide', { direction: "down" }, _duration);
});
What should happen is:
mouseenter the button --> content show
mouseout the button --> content hide
Question: when mouseout on the button is faster than the effect time of mouseenter, the content will be hidden and not displayed when mousenter the button again.
How do I prevent this happening?
Instead of using separate funcitons for the fadeIn and slide effect I decided to implement both in a single animate() function, then I just added some CSS resets to make sure the element is ready before starting the animation:
$(document).ready(function () {
var _duration = 1000;
$('#show-effect-1').hover(function () {
var $next = $('.text-banner');
$next.show();
$next.stop(true, true).css({
'margin-left': $next.outerWidth() * -1,
'margin-top': 0,
'opacity': 0,
'display': 'block'
}).animate({
'margin-left': 0,
'opacity': 1
}, _duration);
}, function () {
var $next = $('.text-banner');
$next.stop(true, true).animate({
'margin-top': $next.height() * -1,
'opacity': 0
}, _duration, function () {
$(this).hide();
});
});
});
Check the Updated fiddle
Note that I had to add a container to accurately reproduce the slide effect, you can test without it and see if it's something you actually need
on my site I display a lot of boxes, up to 60. Each box can be hovered and has it's own color. I realize that with the following js:
$(".box").each( function () {
$(this).data('baseColor',$(this).css('color'));
$(this).hover(function() {
$(this).animate({ backgroundColor: "#68BFEF" }, 500);
},function() {
$(this).animate({ backgroundColor: $(this).css('background-color') },
1000);
});
});
When a box is hovered it should get #68BFEF as background-color, when the mouse leaves the box the color should change to it's old value.
This is the way I apply the css:
<div id="primary">
<div class="box" style="background:...."></div>
<div class="box" style="background:...."></div>
<div class="box" style="background:...."></div>
....
</div>
My problem is that the hover effect should be faster, the color should change faster. Another problem is that not all boxes get there old background color.
Any ideas?
You need to pull the base color you're storing in data when leaving the hover, for example:
$(".box").each( function () {
$(this).data('baseColor',$(this).css('color'));
$(this).hover(function() {
$(this).animate({ backgroundColor: "#68BFEF" }, 500);
},function() {
$(this).animate({ backgroundColor: $(this).data('baseColor') }, 1000);
});
});
Or, a bit more optimized version using $.data() instead:
$(".box").each( function () {
$.data(this, 'baseColor', $(this).css('color'));
$(this).hover(function() {
$(this).stop().animate({ backgroundColor: "#68BFEF" }, 500);
},function() {
$(this).stop().animate({ backgroundColor: $.data(this, 'baseColor') }, 1000);
});
});