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');
});
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 a bunch of divs like so
<div class="listingImage">
<div style="background-image:url('listings/listing1/1/image8Main.jpeg')"></div>
<div style="background-image:url('listings/listing1/1/image2.jpeg')"></div>
<div style="background-image:url('listings/listing1/1/image3.jpeg')"></div>
<div style="background-image:url('listings/listing1/1/image4.jpeg')"></div>
<div style="background-image:url('listings/listing1/1/image5.jpeg')"></div>
<div style="background-image:url('listings/listing1/1/image6.jpeg')"></div>
<div style="background-image:url('listings/listing1/1/image7.jpeg')"></div>
<div style="background-image:url('listings/listing1/1/image9.jpeg')"></div>
</div>
With css:
.listingImage>div: {
position:absolute;
z-index:98;
bottom:0;
right:0;
left:0;
top:0;
background:50% 50%/cover;
}
.listingImage>div.active {
z-index:99;
}
I have a jquery script to cycle through these divs and change the z-index to put one on top of all the rest.
<script>
var timer
$(".listingImage").on("mouseenter", function() {
var element = $(this)
timer = window.setTimeout(function() {
if (element.children(".active").length) {
element.children(".active").removeClass("active").next().addClass("active")
} else {
element.children().first().addClass("active")
}
}, 500)
})
$(".listingImage").on("mouseleave", function() {
$(".active", this).removeClass("active")
clearTimeout(timer)
})
</script>
This script will go to next div and stop working. I believe I have two problems. It might have something to do with var element=$(this). Also, my mouseleave is being triggered by changes in z-index. How can I achieve cycling through divs and then returning to normal onmouseleave? Any help is appreciated, thank you.
Task, on mouseenter, start cycle through boxes. On mouseleave, end cycle and restart
https://jsfiddle.net/sy5br7d0/
If you want to cycle through all the div's then u should use timer = window.setInterval rather than using window.setTimeout.
moidified script:
<script>
var timer
$(".listingImage").on("mouseenter", function() {
var element = $(this)
timer = window.setInterval(function() {
if (element.children(".active").length) {
element.children(".active").removeClass("active").next().addClass("active")
} else {
element.children().first().addClass("active")
}
}, 500)
})
$(".listingImage").on("mouseleave", function() {
$(".active", this).removeClass("active")
clearTimeout(timer)
})
</script>
User setInterval() instead of setTimeout()
var timer
$(".listingImage").on("mouseenter", function () {
var element = $(this)
timer = window.setInterval(function () {
if (element.children(".active").length>0) {
element.children(".active").removeClass("active").next().addClass("active")
} else {
element.children().first().addClass("active")
}
}, 500)
})
$(".listingImage").on("mouseleave", function () {
$(".active", this).removeClass("active")
clearInterval(timer)
})
Fiddle
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/
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 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/