I have an HTML container message that fades in, lasts 30 seconds and fades out. I want to have a "close" feature on it, and would like the click event to fade out to hide the container. But it doesn't work with the prior fadeOut in place.
(function() {
$('.container')
.delay(1000).fadeIn(500)
.delay(30000).fadeOut(500);
$('button').click(function() {
$('.container').fadeOut(500);
});
}());
.container {
background-color: #ccc;
display: none;
padding: 1rem;
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
Hello world
</div>
<button>Close</button>
I could call hide(), but I want the smooth transition that fadeOut provides. I just can't figure out why this won't work. Any ideas? Thanks!
Use setTimeout to queue up the 30-second fadeOut instead:
const container = $('.container');
container
.delay(1000)
.fadeIn(500);
setTimeout(() => container.fadeOut(500), 31000);
$('button').click(function() {
container.fadeOut(500);
});
.container {
background-color: #ccc;
display: none;
padding: 1rem;
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
Hello world
</div>
<button>Close</button>
Related
I have two <div> elements attached to each other, I mean there is no space between them.
<div id="box1">1</div>
<div id="box2">2</div>
And I have this jQuery code:
$('#box1 , #box2').hover(function() {
console.log("Hovered")
}, function() {
console.log("Not")
});
My problem is when I move the mouse between box1 and box2, I still get on console log "Not".
I want those divs to be considered as one element so when I move the mouse between them I don't get on console log "Not".
Thanks in advance!
I want those divs to be considered as one element
Well, quite simply, they aren't. And they can't be. That's not how HTML and CSS works.
The hover event is triggered one for each individual element bound to the event handler. And every time you leave one of those elements it will print the "not" output as per your instructions.
There is no "fix" for this in the exact way you described, but there are alternative approaches. An obvious solution is to wrap them both in an outer div and bind the hover event to that instead. Then the whole area will be considered as one element (because it literally is). Demo:
$('#boxcontainer').hover(function() {
console.log("Hovered")
}, function() {
console.log("Not")
});
#boxcontainer {
border: solid 1px black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="boxcontainer">
<div id="box1">1</div>
<div id="box2">2</div>
</div>
friend check the code below. I think it will work for you. As you have dai you have an absolute position div you must need a parent div and the parent div position must be relative. For doing that you have to add just a simple CSS code position: relative;. You also need to do some changes to your jquery code. You can just hover on the parent div and it will do your work. Hope this code will help you.
//Box 1 Demo
$('#boxParrent1').hover(function() {
console.log("Hovered")
}, function() {
console.log("Not")
});
//Box 2 Demo
$('#boxParrent2').hover(function() {
console.log("Hovered")
}, function() {
console.log("Not")
});
/*Main Code that are needed*/
#boxParrent1, #boxParrent2 {
position: relative;
}
/*Codes Just used to give you a demo*/
#boxParrent1, #boxParrent2{
display: flex;
margin-bottom: 50px;
border: 1px solid #000;
}
#boxParrent1{
width: 200px;
}
#boxParrent2{
width: 210px;
}
#box1, #box2, #box3, #box4{
background: tomato;
width: 100px;
height: 100px;
display: grid;
justify-content: center;
align-items: center;
font-family: Arial;
font-size: 50px;
color: #fff;
cursor: pointer;
}
#box2, #box4{
position:absolute;
top: 0;
left:100px;
background: #02dce6;
}
#box4{
left:110px;
background: #02dce6;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="boxParrent1">
<div id="box1">1</div>
<div id="box2">2</div>
</div>
<div id="boxParrent2">
<div id="box3">3</div>
<div id="box4">4</div>
</div>
Try to place your 2 div's in one super div
<div id="super">
<div id="box1">1</div>
<div id="box2">2</div>
</div>
$('#super').hover(function() {
console.log("Hovered")
}, function() {
console.log("Not")
});
I am trying to make a container div change set height on click, but am having trouble getting it to work. I am not sure where I messed up and would love input as I am pretty new to Javascript.
$(function() {
$('#menu').click(function() {
$(".outer").css('height','600px ');
});
});
Here is a JS fiddle: https://jsfiddle.net/r92cc51d/2/
If you are just looking to increase the height on click then you don't need to do it in JS. You can do it in html also.
<div id="outer">
<div id="menu" onClick = "document.getElementById('outer').style.height = '600px';">
</div>
</div>
You're missing closing parenthesis for your click function:
$('#menu').on('click', function() {
$('.outer').css('height', '400px');
});
.outer {
width: 200px;
height: 200px;
background-color: #111111;
}
#menu {
height: 20px;
width: 20px;
background-color: #666666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div id="menu">
</div>
</div>
I've an alert div, once it pops up I've to wait till it disappear completely before the next animation can occur. Is there any way to ignore/cancel the animation and let it be overwritten with new one? So it re-alert very time I hover the button.
$('.button').hover(function () {
$('#alert-me').show();
$("#alert-me").fadeOut(6000);
});
<div class="hidden-div" id="alert-me">
<b> hello! </b>
</div>
A simple option would be to .finish() the animation before you .show() it.
Working Example:
$('.button').hover(function () {
$('#alert-me').finish().show();
$("#alert-me").fadeOut(6000);
});
.hidden-div {
display: none;
}
.button {
border: 1px solid grey;
padding: 0.5em;
margin: 0.5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="button">button</div>
<div class="hidden-div" id="alert-me">
<b> hello! </b>
</div>
inside the callback of show() method you can hide it.
$('.button').hover(function () {
$('#alert-me').show(function(){
$("#alert-me").fadeOut(6000);
});
});
I have a code which should show the next div from my form:
Next button:
$('.site.active').removeClass('active').hide().next().show().addClass('active');
Back button:
$('.side.active').removeClass('active').hide().prev().show().addClass('active');
All works fine for me but how can I animate my show and hide like in this form here: http://azmind.com/demo/bootstrap-long-multi-step-form/
In my form the transition is very hard hide last and show next.
You can nest animations by using callbacks. When an animation finishes, it's callback function is called. Inside that you can perform another animation on another element.
In your case, you'll want to select the element with the .active class, fade it out, in that fade out's callback remove the .active and call .next(), fade that "next" element in, then call .addClass() in the fade in's callback.
$(function() {
$('.next').on('click', function() {
$('.active').fadeOut('slow', function() {
// this gets called when the fade out finishes
$(this).removeClass('active').next().fadeIn('slow', function() {
// this gets called when the fade in finishes
$(this).addClass('active');
});
});
});
});
.page {
display: none;
width: 100px;
height: 100px;
}
.first {
display: block;
background: red;
}
.second {
background: blue;
}
.third {
background: green;
}
.active {
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page first active">first page</div>
<div class="page second">second page</div>
<div class="page third">third page</div>
<button class="next">Next</button>
I have created an element that is displayed when I am over a particular box.
If I move my mouse over the box I can see my element but then I need to move my mouse in and out twice for the element to disappear. How can I fix it? Shouldn't the element hide itself once I move the mouse out?
How do I make my box only show when mouse is over the box?
<script>
$("#box").on("mouseover",function()
{
$("#my-box").toggle();
});
</script>
I tried to hide it myself, but it didn't work:
$("#box").on("onmouseout", function()
{
$("#my-box").hide();
});
You can use mouseover and mouseout in a same eventlistener like one below:
$("#box").on("mouseover mouseout",function()
{
$("#my-box").toggle();
});
#my-box{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
Box here
</div>
<div id="my-box">
My Box
</div>
FIDDLE DEMO
The problem with your code is you're using onmouseout instead of use mouseenter and mouseleave method.
You can use hover:
$('#box').hover(function(){
$('#my-box').toggle();
});
You can use combination of both
$("#box").mouseover(function() {
$("#my-box").show();
}).mouseout(function() {
$("#my-box").hide();
});
Example
jQuery Solution
HTML
<div class="box" id="action"></div>
<div class="box" id="hidden"></div>
JS
$("#action").on("mouseover mouseout",function()
{
$("#hidden").toggle();
});
CSS
.box{
width: 30px;
height: 30px;
background: red;
margin: 10px;
}
#hidden{
display: none;
}
JSFiddle
Allthough it would be better doing this by just using CSS.
CSS Only Solution
.box{
width: 30px;
height: 30px;
background: red;
margin: 10px;
}
#action:hover + #hidden{
display: block;
}
#hidden{
display: none;
}
JSFiddle