I have a small problem with a list definition. Basically, I have a fadein effect on my lists (which works) but the problem is that when my <li> appear, they are not inline-block. So I add the inline-block in the JS, but fadein vanishes ..
function fadeLI(elem) {
elem.fadeIn(500, function() {
fadeLI($(this).next().css("display","inline-block"));
});
}
fadeLI($("#portfolio li:first"));
Here is an example : http://jsfiddle.net/mqthK/426/
Do you have any idea?
Try
function fadeLI(elem) {
elem.css('opacity', '0').addClass('test').stop().animate({opacity: 1}, 'slow', function() {
var $next = $(this).next();
if($next.length)
fadeLI($next);
});
}
fadeLI($("#test li:first"));
Demo: Fiddle
.test {
display: inline-block;
}
http://jsfiddle.net/mqthK/429/
Related
I am trying to make the first square box onhover, then show the bigger box a little bit delay then when I move the mouse hover the big box, the big box still appears.However, my code works incorrectly.
If someone could please help me out? Thanks
Sample http://jsfiddle.net/9oLs3fyh/
var timeout;
$("#box1").hover(function () {
clearTimeout(timeout);
$("#box2").delay(500).show();
}, function () {
timeout = setTimeout(function(){
$("#box2").delay(500).hide();
},500);
});
if($("#box2").is(':hover')){
$("#box2").show();
}
var timeout;
$("#accountIcon").hover(function () {
clearTimeout(timeout);
$("#accountPopup").delay(500).show(500);
}, function () {
setTimeout(function(){
$("#accountPopup").delay(500).hide(500);
},500);
});
if($("#accountPopup").is(':hover')){
$("#accountPopup").show();
}
DEMO
I think this is a good way to achieve that by wrap your divs inside one div
<div class="conatiner">
<div id="accountIcon"></div>
<div id="accountPopup"></div>
</div>
.conatiner{
overflow:hidden;
}
var timeout;
$(".conatiner").hover(function () {
clearTimeout(timeout);
$("#accountPopup").delay(500).show(500);
}, function () {
setTimeout(function(){
$("#accountPopup").delay(500).hide(500);
},500);
});
DEMO HERE
and while you use hover .. you can just use css with visibility and transition delay
<div class="conatiner">
<div id="accountIcon"></div>
<div id="accountPopup"></div>
</div>
.conatiner:hover #accountPopup{
display: block;
-webkit-transition-delay: 1s; /* Safari */
transition-delay: 1s;
}
DEMO
Try assiging class hovered (check the DEMO):
CSS
.hovered { display:block }
On mouseenter of #accountIcon assign class hovered on #accountPopup element.
Then, on mouseleave, if the target element (#accountPopup) is not visisble, just remove the class.
$('#accountIcon').on('mouseenter', function() {
$('#accountPopup').addClass('hovered');
}).on('mouseleave', function() {
var target = $('#accountPopup');
if (!target.is(':visible')) {
target.removeClass('hovered');
}
});
$('#accountPopup').on('mouseleave', function() {
$(this).removeClass('hovered');
});
I have one question about Jquery hidden fuction.
I have two different Demo from codepen.io
First DEMO css animation will working. but .wrap is not to be hidden when i click second time .note a.
Second DEMO .wrap is hidden but not with animation. I want when i click .note a for close .wrap then .wrap going to be a hidden with css animation like first DEMO.
how about this
is this what you wanted?
$(document).ready(function() {
var circle = $('.circle');
var wrap = $('.wrap');
$(".note a").click(function(e) {
e.preventDefault();
$('.wrap').is(':hidden') ? $('.wrap').show() : setTimeout(function(){$('.wrap').hide()},500);
if (wrap.hasClass('bounceInUp')) {
wrap.removeClass('bounceInUp').addClass('bounceOutDown');
}
else {
wrap.addClass('animated bounceOutDown');
wrap.removeClass('bounceOutDown').addClass('bounceInUp');
}
if (circle.hasClass('bounceInLeft')) {
circle.removeClass('bounceInLeft').addClass('bounceOutRight');
}
else {
$('.circle').addClass('animated bounceOutRight');
circle.removeClass('bounceOutRight').addClass('bounceInLeft');
}
});
});
Use a setTimeout function http://codepen.io/akshay-7/pen/gbgYvx
$('.wrap').is(':hidden') ? $('.wrap').show() : setTimeout(function(){
$('.wrap').hide();
},2000);
Hello I have two divs that fadeToggle with a timer as follows
<div id="div1">Hello</div>
<div id="div2" style="display:none;">World</div>
Javascript to make it toggle
$(document).ready(function(){
setInterval(ToggleDiv, 5000);
});
function ToggleDiv(){
$('#div1').fadeToggle("slow");
$('#div2').fadeToggle("slow");
}
Here is fiddle link http://jsfiddle.net/BnYat/
My issue is that the second div shows up before the first div is done toggle and then causes a jump up to the top.
If there a way to create a smooth transition from one div to the next without the jump effect happening?
A simple solution is to put both div elements in a single container, and position them absolutely:
<div id="container">
<div id="div1">Hello</div>
<div id="div2" style="display:none;">World</div>
</div>
#container div {
position: absolute;
}
Example fiddle
Alternatively, you could fade one out completely then fade the next in in the callback:
setInterval(ToggleDiv, 5000);
function ToggleDiv(){
$('#div1').fadeToggle("slow", function() {
$('#div2').fadeToggle("slow");
});
}
Example fiddle
$(document).ready(function(){
setInterval(ToggleDiv, 5000);
});
function ToggleDiv(){
$('#div1').fadeToggle("slow", function(){
$('#div2').fadeToggle("slow");
});
}
just use animate
$( "#div1" ).animate({
visibility:hidden
}, 5000, function() {
// Animation complete.
});
$( "#div2" ).animate({
visibility:visible
}, 5000, function() {
// Animation complete.
});
Try this
setInterval(ToggleDiv, 5000);
function ToggleDiv() {
var div = "#" + $('div:visible').attr('id');
var div2 = "#" + $('div:not(:visible)').attr('id');
$(div).fadeToggle("slow", function () {
$(div2).fadeToggle("slow");
});
}
DEMO
or
function ToggleDiv() {
if ($('#div1').is(':visible')) {
$('#div1').fadeToggle("slow", function () {
$('#div2').fadeToggle("slow");
});
} else {
$('#div2').fadeToggle("slow", function () {
$('#div1').fadeToggle("slow");
});
}
}
DEMO
I try to make a image fadeIn effect, I set jQuery animate method to implement fade-in effect, and I found the hover event which I register in CSS have been cancelled.
I think it's weird, the method should not affect my hover effect.
Although I can re-register hover event by javascript, but it is doing an other task
Is anything I misunderstanding?
P.S. I'm trying to not to use CSS3 animation.
JS part:
$('img').animate({
'opacity': '0.5'
}, 1500);
CSS part:
img {
opacity: 0;
}
img:hover {
opacity: 1;
}
http://jsfiddle.net/aSRMR/
Use !important in css that will solve the problem
img:hover {
opacity: 1 !important;
}
Working Fiddle
You could use hover instead.
$('img').hover( function (){
console.log('hovered in');
}, function (){
console.log('hovered out');
}
Don't forget to put stop() before you do an animate.
so trying your code will look like this.
$('img').hover( function (){
console.log('hovered in');
$('img').stop().animate({'opacity': '1'}, 1500);
}, function (){
console.log('hovered out');
$('img').stop().animate({'opacity': '0.5'}, 1500);
}
Another solution, if you want to do a CSS approach, do it like this.
$('img').hover( function (){
$('img').addClass('hovered');
}, function (){
$('img').removeClass('hovered');
}
on your CSS.
img {
opacity: 0;
}
.hovered {
opacity: 1;
}
Have you also considered fading using CSS Webkit?
I have a menu that when hovered, shows the subnav of the current hovered item by adding .stick to the submenu and removing it on mouseleave. If not hovering on another menu item I want the last hovered menu item to stay open for another 2 seconds before hiding.
Here's what I have. I know that the mouseleave() called on the container won't work since it's within the handlerOut of the ul#main-nav > li hover function but I left it to show you where I last left off.
$('ul#main-nav > li').hover(function() {
var $this = $(this);
clearTimeout(window.menustick);
$this.find('ul.submenu').addClass('stick');
}, function() {
var $this = $(this);
if($this.siblings().hover()) {
$this.find('ul.submenu').removeClass('stick');
} else if ($('#main-nav').mouseleave()) {
window.menustick = setTimeout(function(){
$this.find('ul.submenu').removeClass('stick');
}, 2000);
}
});
Here's the jsFiddle.
Thanks in advance!
JS:
$("ul#main-nav > li").hover(
function(){
$(this).children('ul').hide().fadeIn(500);
},
function () {
$('ul.submenu', this).fadeOut(2000);
});
Fiddle: http://jsfiddle.net/3F7bJ/3/
You had a couple of issues with your scripts and CSS.
Firstly, your CSS had the following rule:
nav ul#main-nav li:hover > ul.submenu {
display: block;
}
This needs to be modified to:
nav ul#main-nav li > ul.submenu.stick {
display: block;
}
This meant that your CSS was controlling the visibility rather than the class 'stick'.
As you mentioned the use of .hover() and .mouseleave() in the script code is incorrect and not required. As at that point you are already in the mouseleave (handlerOut) of the hover.
The below code appears to perform the desired effect you were looking for:
var menuStickTimeoutId;
$('ul#main-nav > li').hover(function () {
var $this = $(this);
clearTimeout(menuStickTimeoutId);
$('#main-nav ul.submenu').removeClass('stick');
$this.find('ul.submenu').addClass('stick');
}, function () {
var $this = $(this);
clearTimeout(menuStickTimeoutId);
menuStickTimeoutId = setTimeout(function () {
$this.find('ul.submenu').removeClass('stick');
}, 2000);
});
Working demo:
http://jsfiddle.net/3F7bJ/2/