I want to remove div with a great animation but I don't know how to do this.
So I make that fiddle for example :
HTML
<h2>What I have</h2>
<div class='test'>1</div>
<div class='test'>2</div>
<div class='test'>3</div>
<div class='test'>4</div>
<div class='test'>5</div>
<h2>What I Want</h2>
<div class='test2'>1</div>
<div class='test2'>2</div>
<div class='test2'>3</div>
<div class='test2'>4</div>
<div class='test2'>5</div>
CSS
div.test, div.test2 {
display:inline-block;
padding: 20px;
margin:5px;
border:1px solid black;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
JS
$('div.test').on('click', function() {
$(this).remove();
});
$('div.test2').on('click', function() {
// I don't want to change opacity or padding...
// I just want to remove with animation like this:
$(this).css('width','0px').css('padding','0px');
$(this).css('opacity',0);
});
I see a good example here
But when a div is removed, she's cut and they are only animation for the next div.
Any idea ?
EDIT
Finally resolved : Jsfiddle
Since you remove your element, it cannot be animated anymore. You could animate via a class and on transitionend remove the element. Like this for example:
.animate
{
height: 0px;//or anything you need
transition: height 1s;
}
$('#delete').click(function (e) {
//instead of remove you add a class.
$(".notification:first-child").addClass('animate');
});
$('.notification').on('transitionend', function(e){
//when transition is finished you remove the element.
$(e.target).remove()
});
http://jsfiddle.net/nawkufh1/
You could do it like this:
$('#delete').click(function (e) {
$(".notification:first-child").slideUp(function() {
$(this).remove();
});
});
$('#add').click(function (e) {
$(".notifications").append("<div class='notification'></div>");
});
.notifications {
left: 0px;
top: 0px;
width: 400px;
height: 300px;
position: relative;
border: solid 1px green;
}
.notification {
height: 40px;
background: lightblue;
margin: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button type="button" id="delete">delete</button>
<button type="button" id="add">add</button>
<div class="notifications">
<div class="notification"></div>
<div class="notification"></div>
<div class="notification"></div>
<div class="notification"></div>
</div>
This uses jQuery to animate instead of CSS. When the delete button is clicked, it slides the top bar up then it gets removed.
I've solved my problem with animation JsFiddle
Thanks all for your help.
Related
hello I need to maximaze or minimize a div in my html page using only javascript no jquery i wanna be able to do like this http://jsfiddle.net/miqdad/Qy6Sj/1/
$("#button").click(function(){
if($(this).html() == "-"){
$(this).html("+");
}
else{
$(this).html("-");
}
$("#box").slideToggle();
});
this is exactly how i want it to be but no jquery
but with no jquery only javascript, can someone please help me, I googled this everywhere and couldnt find the answer
a simple google search came up with:
https://www.itcodar.com/javascript/expand-div-on-click-with-smooth-animation.html#:~:text=How%20to%20display%20a%20div%20with%20a%20smooth,transition%20must%20include%20the%20change%20of%20height.%20Thus%3A
function seeMore() {
const text = document.getElementById('website-info-idea')
const text2 = document.getElementById('website-info-technical')
text.classList.toggle("show")
text2.classList.toggle("show")
}
.col {
opacity: 0;
height: 0;
overflow: hidden;
transition: all 1s ease-in-out;
}
.col.show {
opacity: 1;
height: 23px;
transition: all 1s ease-in-out;
}
#a1 {
display:inline-block;
border: solid 2px black;
}
<div id='a1'>
<a onclick="seeMore()" class="btn btn-secondary btn-md btn-custom">About this Website</a>
<div class="col" id="website-info-idea">Idea</div>
<div class="col" id="website-info-technical">Technical</div>
</div>
Okay, so I'm basically trying to achieve that if you click div1, the width of this specific div changes to 50%, and all the other divs their widths change to, let say 2%. (see jsfiddle for more clarity)
I've tried to do this by giving them a separate class, so the div being click is Online, the rest of Offline. I thought it might work if I then said something like; if .. hasClass .. do this.
In the end, I've managed to indeed scale the div on click to 50%, but sadly enough I made quite a mess of the rest. I'll include the code, and I hope someone can explain to me how I should proceed. I also thought of an Array but did not know how to move forward with this.
https://jsfiddle.net/6cjmshrq/
1
$(".sliding-panel1").click(function(){
$(".sliding-pane2").addClass("Active");
$(".sliding-pane2").addClass("Offline");
$(".sliding-pane3").addClass("Offline");
$(".sliding-pane4").addClass("Offline");
$(".sliding-pane5").addClass("Offline");
$(".sliding-pane6").addClass("Offline");
$(".sliding-pane7").addClass("Offline");
$(".sliding-pane8").addClass("Offline");
$(".sliding-pane9").addClass("Offline");
$(".sliding-pane10").addClass("Offline");
$(".sliding-pane11").addClass("Offline");
});
2
$(".sliding-panel1").click(function(){
if ( $(this).hasClass("Active") ) {
$(this).animate({
width: '9%',
height: '100%'
});
} else {
$(this).animate({
width: '50%',
height: '100%'
});
}
$(this).toggleClass("Active");
});
3
$(function(){
$('.sliding-panel1').click(function(){
$(".container").children().each( function(){
if (!$(this).hasClass('Active') ){
$(this).animate({
width: '9%'
})
else {
$(this).animate({
width: '50%'
})
};
4
var elements = document.getElementsByClassName('Offline');
for (var i = 0; i < elements.length; i++) {
elements[i].style.widht='2%';
elements[i].style.height='100%';
}
5
$(".sliding-panel1").click(function(){
$("#selectedwhip").addClass("active");
});
$(function() {
if ($("#selectedwhip").hasClass("active")) {
console.log('active');
}
else {
console.log('unactive');
}
});
You can minimize the css your css isnt dry , just use a single default class for the default state and add a class with name .Active in css with the transition property and you dont have to write that much jquery code too to control the width and height, instead you add or remove the .Active class see a demo below if that is how you want it
$(".container div").on('click', function(e) {
var $this = $(this);
$(".container div").filter(function() {
return !$(this).is($this);
}).removeClass('Active').addClass('Offline');
$this.removeClass('Offline').addClass('Active');
});
*,
*:before,
*:after {
margin: 0;
box-sizing: border-box;
}
body,
html {
height: 100%;
}
.container {
position: relative;
width: 100%;
height: 100%;
background-color: grey;
}
.panels {
width: 9%;
float: left;
height: 100vh;
background-color: red;
border: 1px black solid;
}
.Active {
width: 50%;
transition: 1s linear;
}
.Offline {
width: 5%;
transition: 1s linear;
}
<div class="container">
<div class="panels">1
</div>
<div class="panels">
</div>
<div class="panels">
</div>
<div class="panels">
</div>
<div class="panels">
</div>
<div class="panels">
</div>
<div class="panels">
</div>
<div class="panels">
</div>
<div class="panels">
</div>
<div class="panels">
</div>
<div class="panels">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Maybe this is:
$("[class^='sliding-panel']" ).click(function(){ //selector part of class name
$("[class^='sliding-panel']" ).addClass("Offline").removeClass("Active"); //for all
$(this).addClass("Active").removeClass("Offline"); //for this element
});
Slight adjustment of Muhammad Omer Aslam's answer to account for shrinking the un-clicked divs instead of pushing them off screen (if I'm seeing it right):
script:
$(".container div").on('click', function() {
$(".container div").removeClass('Active');
$(".container div").addClass('Inactive');
$(this).removeClass('Inactive');
$(this).addClass('Active');
});
append to his css:
.Inactive {
width: 2%;
transition: 1s linear;
}
I have an HTML like the below format:
<div class="parent1">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
</div>
<div class="parent2">
Content here
</div>
Where Child 1/2/3 are tabs. Upon clicking one, the content will get active and a class active is added there.
I want to make the parent2 class visible (display block) only if Child 2 is active. I have tried some CSS which are not working.
Is there any possible script available for that?
Thank you.
In Jquery,
$(".child2").hasClass("active")?($(".parent2").css("display","block")):($(".parent2").css("display","none"))
A javascript onclick function will work for this.
<style>.nodisplay{display: none;}</style>
<div class="parent1">
<div id='child1' onclick='show(this)' data-id='parent2' class="child1">Parent2</div>
<div id='child2' onclick='show(this)' data-id='parent3' class="child2">Parent3</div>
<div id='child3' onclick='show(this)' data-id='parent4' class="child3">Parent4</div>
</div>
<div id='parent2' class='nodisplay'>
Content here
</div>
<div id='parent3' class='nodisplay'>
Content here
</div>
<div id='parent4' class='nodisplay'>
Content here
</div>
<script>
function show(div) {
var id1 = div.getAttribute('data-id');
var x = document.getElementById(id1);
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
First I set the display of parents 2, 3, & 4 to none with CSS. next I add an onclick function to each child div and specify the data I want my script to pick up.
Then in my function; it will either collect 'parent2', parent3', or 'parent4' depending on which div was clicked, then assigns it the variable of id1. Next I create a variable 'x' to toggle between showing the div or not.
I hope this helps you understand using javascript to manipulate CSS a little better. Have a great day.
There are several ways to do it, you can try with jQuery show() and hide() , check here:
UPDATE: Using display block
You can do this:
//Register click listener:
$(".child2").click(function() {
//Check if the class is added
if($(".child2").hasClass("active")){
//Set display block
$('.parent2').css('display', 'block')
}
});
Both css('display', 'block') and show() will work
This is a purely CSS-based tabs implementation:
.parent {
font-size: 0;
}
input[type=radio] {
display: none;
}
input[type=radio]+label {
border: 4px solid #f0f0f0;
display: inline-block;
font-size: 16px;
padding: 10px;
min-width: 100px;
text-align: center;
transition: all .2s ease;
}
input[type=radio]:checked+label {
background-color: #a00;
color: #fff;
}
.tab-content {
background-color: #f0f0f0;
position: absolute;
height: 500px;
width: 500px;
opacity: 0;
transition: all .3s ease-in-out;
font-size: 16px;
padding: 15px;
}
input[type=radio]:checked ~.tab-content {
transition: all .6s ease-in-out .2s;
}
#tab1:checked~.tab1 {
opacity: 1;
}
#tab2:checked~.tab2 {
opacity: 1;
}
#tab3:checked~.tab3 {
opacity: 1;
}
<div class="parent">
<input type="radio" name="tabs" id="tab1" checked><label for="tab1">Tab 1</label>
<input type="radio" name="tabs" id="tab2"><label for="tab2">Tab 2</label>
<input type="radio" name="tabs" id="tab3"><label for="tab3">Tab 3</label>
<div class="tab-content tab1">Content for Tab 1...</div>
<div class="tab-content tab2">... here's content for Tab 2, ...</div>
<div class="tab-content tab3">... and, last but not least, here's Tab 3 content.</div>
</div>
Ok so I have been following this question jQuery animate color change and have copied their syntax exactly. I'm trying to animate a change in a few css properties on hover, starting with border-color.
Originally I had $(".panel-default", this).css("border-color", "#ddd"); within my function but that was instant. Now I have:
$(".lab1, .lab2, .lab3").hover(function(){
$(".panel-default", this).animate({"border-color":"green"}, 200);
}, function() {
// $(".panel-default", this).css("border-color", "#ddd");
// $(".panel-default > .panel-heading", this).css("background-color", "#f5f5f5");
// $(".panel-default > .panel-heading", this).css("border-color", "#ddd");
// $(".panel-default > .panel-heading", this).css("color", "#565656");
$(".panel-default", this).animate({"border-color":"black"}, 200);
});
But nothing is happening. How can I animate change in css on hover?
You can utilize css :hover
[class*=lab-] .panel-default {
display:block;
width: 50px;
height: 50px;
border: 4px solid black;
border-color: black;
transition: border-color 200ms ease-in-out;
}
[class*=lab]:hover .panel-default {
border-color: green;
}
<div class="lab-1">
<div class="panel-default">
</div>
</div>
<div class="lab-2">
<div class="panel-default">
</div>
</div>
<div class="lab-3">
<div class="panel-default">
</div>
</div>
I'm running into an issue where I am attempting to get inline-block elements to display: none on page load, but then I want them to fadeIn one by one in their original inline-block form. However, when I do a normal jQuery fadeIn the elements display as block.
My jQuery is like this right now:
function blueBoxDelays(){
$('.fadeBlock1').delay(200).fadeIn(500);
$('.fadeBlock2').delay(400).fadeIn(500);
};
CSS
.dark-blue-box, .light-blue-box {
height: 50%;
width: 25%;
display: inline-block;
/*display: none; ********I replaced the inline-block with this.
vertical-align: top;
padding: 0;
margin: 0;
transition: all .8s ease-in-out;
}
Is there something I can do to the jQuery to get these to fadeIn as inline-block elements?
You can try this,
$(document).ready(function(e) {
$('.fadeBlock').css('display','none');
blueBoxDelays();
function blueBoxDelays(){
var delay = 0;
$('.fadeBlock').each(function(i){
$(this).delay(400+delay).fadeIn(1000);
delay = 400*(i+1);
});
};
});
.fadeBlock {
height: 100px;
width: 100px;
display: inline-block;
}
.dark-blue-box{
background-color: blue;
}
.light-blue-box{
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dark-blue-box fadeBlock"></div>
<div class="light-blue-box fadeBlock"></div>
<div class="dark-blue-box fadeBlock"></div>
<div class="light-blue-box fadeBlock"></div>
<div class="dark-blue-box fadeBlock"></div>
<div class="light-blue-box fadeBlock"></div>
DEMO
Note:
Remove the opacity from .dark-blue-box, .light-blue-box
you could achieve the desired result by using opacity with transition property.
initially it'd be
.fadeBlock1 {
opacity:0;
transition: all 0.5s ease-in-out;
}
$('.fadeBlock1').css('opacity','1');
Do you want something like this??
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style>
.dark-blue-box{
display:inline-block;
border:1px solid #19248c;
background-color:#19248c;
height:50px;
width:50px;
}
.light-blue-box{
display:inline-block;
border:1px solid #6699cc;
background-color:#6699cc;
height:50px;
width:50px;
}
</style>
</head>
<body>
<div class='dark-blue-box'>
</div>
<div class='light-blue-box'>
</div>
<script>
$(document).ready(function(e) {
$('.dark-blue-box').css('display','none');
$('.light-blue-box').css('display','none');
boxFadeIn();
});
function boxFadeIn(){
$('.dark-blue-box')
.delay(200)
.fadeIn(500)
.queue(function (next) {
$(this).css('display', 'inline-block');
next();
});
$('.light-blue-box')
.delay(400)
.fadeIn(500)
.queue(function (next) {
$(this).css('display', 'inline-block');
next();
});
}
</script>
</body>
</html>
try this one
function blueBoxDelays(){
$('.fadeBlock1').delay(200).fadeIn(500).css('display','inline-block');
$('.fadeBlock2').delay(400).fadeIn(500).css('display','inline-block');
};