how to fadein child element of class - javascript

This is my data and now I want to fadein elements of class data one by one
.data
{
width: 74%;
background: red;
height: 20px;
position: absolute;
right: 13%;
display: flex;
text-align: center;
}
<div class="data">data A1
</div>
<div class="data"> data B1
</div>
<div class="data"> data C1
</div>
<div class="data"> data D1
</div>
I tried $(".data")[0].fadeIn(2000) as well as $(".data")[0].delay(200).fadeIn(2000)
both gives error when I use index but works fine when removed index but then all child fadeIn at same time.

You're dereferencing the array you get when you do $(".data")[0] and end up with the underlying DOM node which you can't use a jQuery method on. Instead of using $(".data")[0], use $(".data:first"), $(".data:eq(0)"), $(".data").eq(0), or $(".data").first()

What your doing gets the single DOM element, rather than getting a jquery representation of that element, in your case you could do soemthing like:
var ele = $(".data")[0]
$(ele).fadeIn(2000)

I think this is what you need.
(is not the best code but should work)
var a=0;
$(".data").each(function(){
a++;
$(this).fadeIn(1000*a);
});
.data
{
width: 100%;
background: red;
height: 20px;
display: none;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="data">data A1
</div>
<div class="data"> data B1
</div>
<div class="data"> data C1
</div>
<div class="data"> data D1
</div>

You can target certain elements of the same class in jQuery using .eq()
$(".data").eq(2).fadeIn(1000);
You could create a for loop to iterate through each element with the class name and use a setTimeout to give a delay before fading in.
More examples at:
https://api.jquery.com/eq/

If you don't need to use JS then a CSS approach is using #keyframes you just need to delay the start time of the element using animate-delay and adding the required classes to the elements. Fiddle Hope this helps.
.fadeIn{
animation-name: fadeIn;
}
.animated1{
animation-duration: 2s;
animation-fill-mode: both;
}
.animated2{
animation-duration: 2s;
animation-fill-mode: both;
animation-delay: 2s;
}
.animated3{
animation-duration: 2s;
animation-fill-mode: both;
animation-delay: 4s;
}
.animated4{
animation-duration: 2s;
animation-fill-mode: both;
animation-delay: 6s;
}
#keyframes fadeIn
{
0%
{
opacity:0;
}
to{
opacity:1;
}
}
.fadeIn{
animation-name:fadeIn;
}
<div class="data fadeIn animated1">data A1
</div>
<div class="data fadeIn animated2"> data B1
</div>
<div class="data fadeIn animated3"> data C1
</div>
<div class="data fadeIn animated4"> data D1
</div>

You can use a recursion to animate the 1st element of the collection. Whenever the current .fadeIn() animation ends, call the function with the collection, but with the 1st item removed by .slice():
function fadeIn($els) {
$els.eq(0).fadeIn(1000, function() {
fadeIn($els.slice(1));
});
}
fadeIn($('.data'))
.data {
background: red;
height: 20px;
text-align: center;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="data">data A1
</div>
<div class="data"> data B1
</div>
<div class="data"> data C1
</div>
<div class="data"> data D1
</div>

You can use .each() and setTimeout()
$('.data').each(function(i){
var ThisIt = $(this);
setTimeout(function(){
$('.data').fadeOut(200);
ThisIt.fadeIn(200);
} , 3000 * i);
});
.data
{
width: 74%;
background: red;
height: 20px;
position: absolute;
right: 13%;
display : flex;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="data">data A1
</div>
<div class="data"> data B1
</div>
<div class="data"> data C1
</div>
<div class="data"> data D1
</div>
OR : You can use something like delay() , .queue() and addClass()
$('.data').each(function(i){
var ThisIt = $(this);
ThisIt.delay(2000 * i).queue(function(){
$(this).addClass('visible');
});
});
.data
{
width: 74%;
background: red;
height: 20px;
position: absolute;
right: 13%;
display : flex;
text-align: center;
visibility : hidden;
opacity : 0;
}
.visible{
visibility : visible;
opacity : 1;
transition-duration : 2s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="data">data A1
</div>
<div class="data"> data B1
</div>
<div class="data"> data C1
</div>
<div class="data"> data D1
</div>
Note: this code just to start with .. you can play around to make it
infinite loop

Unlike the other answers, this answer guarantees that each will follow the previous. The other answers cannot guarantee that using timeouts.
This is a function that correctly uses the callback to recurse through each <div> to display them one after another as the question requests.
I've made two modifications to your base CSS. I set the background-color to white (for easier reading) and the set the display to none so the animation will be visible.
let collection = $('.data');
(function doIt(index) {
$(collection[index])
.fadeIn(2000, () => {
if (index++ < collection.length) doIt(index);
});
})(0);
.data {
width: 74%;
background: white;
height: 20px;
position: absolute;
right: 13%;
display: flex;
text-align: center;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="data">data A1
</div>
<div class="data"> data B1
</div>
<div class="data"> data C1
</div>
<div class="data"> data D1
</div>

Related

CSS transition within JavaScript not working

Here is my HTML, CSS, JS
const Col = document.querySelectorAll('.col')
function onCol() {
Col.forEach(function(el, idx) {
el.style.transition = '0s';
el.style.height = '0%';
el.style.transition = '0.9s';
el.style.height = '100%';
});
}
onCol()
.work {
display: flex;
height: 140px
}
.col {
background: red;
width: 20px;
height: 100%;
margin-left: 5px;
max-height: 0
}
<div class="work">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
I think that columns should become bigger SMOOTHLY WITH TRANSITION 0.9 !!!
but they do not.
If I type the word with el.style.height = '100%'; into setTimeOut, it will work.
but I don't want to make this in callback queue.
I just want to solve this in the call stack.
and I want to know why doesn't this work now.
i changed this with for loop. but not works
Gloomy Young
set the intial height to 0, run function only after body is loaded and set desired transition duration and target height in func,
css
.work {display: flex; height: 140px}
.col {
background: red;
width: 20px;
margin-left: 5px;
height: 0;
}
javascript
window.onload = () => {
document.querySelectorAll('.col').forEach(i => {
i.style.transition = '1s';
i.style.height = '100%';
});
}
If you want not to use javascript. You can achieve this only using css animations.
I would modify your code to do this mostly in CSS, using classes on the parent element to toggle the effect. Here I've used setInterval just to give an idea of what's happening.
Below that is a way of making it so that each bar animates in its own time.
const work = document.querySelector('.work');
work.classList.toggle('hide');
setInterval(() => work.classList.toggle('hide'), 1500);
.work {
display: flex;
height: 140px;
}
.col {
background: red;
width: 20px;
height: 100%;
margin-left: 5px;
transition: height 0.9s;
}
.work.hide .col {
height: 0;
}
<div class="work">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
const work = document.querySelector('.work');
work.classList.toggle('hide');
setInterval(() => work.classList.toggle('hide'), 5000);
.work {
display: flex;
height: 140px;
}
.col {
background: red;
width: 20px;
height: 140px;
margin-left: 5px;
}
.col:nth-child(1) {
transition: height 0.9s 0s;
}
.col:nth-child(2) {
transition: height 0.9s 1s;
}
.col:nth-child(3) {
transition: height 0.9s 2s;
}
.col:nth-child(4) {
transition: height 0.9s 3s;
}
.col:nth-child(5) {
transition: height 0.9s 4s;
}
.work.hide .col {
height: 0;
}
<div class="work hide">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>

Need help to make that only two cards would be possible to click until they are matched

I'm new to javascript/jquery. I'm trying to create a card match game.
Need help to make that only two cards would be possible to click at the time. To prevent clicking while two cards being check if they match.
Tried to give unbind method to an element when there are in total two divs with .open class, but it removes the click event entirely, and to pass the click event back with (.bind('click' function())) doesn't work, because I don't have a function to give as an argument.
Is there a way to do it or maybe I could do it differently? Thanks.
$('.card').click(function() {
$(this).addClass('open flip');
var numToMatch = $(this).find('.face').text();
if($('.open').length === 2) {
if($('.open').first().find('.face').text() == $('.open').last().find('.face').text()){
$('.open').each(function() {
$(this).removeClass('open').unbind('click');
});
} else {
setTimeout (function(){
$('.open').each(function() {
$(this).removeClass('open flip');
});
}, 1000);
};
};
});
* {
maring: 0;
padding: 0;
}
.div-container {
display: grid;
grid-template-columns: repeat(3, auto);
justify-content: center;
perspective: 500px;
}
.card {
width: 90px;
height: 140px;
margin: 5px;
display: relative;
transform-style: preserve-3d;
transition: transform 0.5s ease-in-out;
}
.card.flip {
transform: rotateY(180deg);
}
.face {
width: 100%;
height: 100%;
background-color: lightblue;
transform: rotateY(180deg);
backface-visibility: hidden;
transition: transform 500ms ease-in-out;
display: flex;
font-size: 5em;
justify-content: center;
align-items: center;
}
.back {
width: 100%;
height: 100%;
background-color: green;
transition: transform 500ms ease-in-out;
position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='div-container'>
<div class='card'>
<div class='back'></div>
<div class='face three'>3</div>
</div>
<div class='card'>
<div class='back'></div>
<div class='face one'>1</div>
</div><div class='card'>
<div class='back'></div>
<div class='face one'>1</div>
</div><div class='card'>
<div class='back'></div>
<div class='face two'>2</div>
</div><div class='card'>
<div class='back'></div>
<div class='face two'>2</div>
</div><div class='card'>
<div class='back'></div>
<div class='face three'>3</div>
</div>
</div>
The problem is that you add the open flip class as soon as a click event has occurred. This is why it's possible to "spam click" and have more than 2 cards open at the same time. To prevent this, just change the first few lines of the click handler to this:
$('.card').click(function() {
if($('.open').length >= 2)
return;
//... more code ...
});
If the amount of open cards is more than or equal to 2, simply return and don't handle the click event at all.

Animated toggle columns

I have an HTML page containing a table, in which i have three columns with display:none and visibility:hidden. When clicking a cell in the adjacent column, the attributes change to table-cell and visible respectively, showing the three columns. Another click at the cell of said adjacent column resets the values to none and hidden.
The only problem is that, of course, it's not pleasant to see. I would like to include an animation so that i can see the other columns shrink in order to let the hidden columns slide in the middle and an animation when i can do the opposite thing.
What should I use? I'm asking for help because I'm relatively new to web designing and I have no idea about where to look for guidance.
The tables themselves are not animated. Perhaps this option may suit you. (Google translate.)
$('.show').on('click', function(){
$('.table').find('.td').each(function(){
if($(this).css('display') === 'none'){
$(this).show().addClass('animate');
}
});
});
.table{
display: flex;
flex-direction: column;
}
.td{
border: 1px solid #999;
border-collapse: collapse;
}
.tr{
display: flex;
}
.td{
padding: 10px;
}
.td:nth-of-type(2){
display: none;
}
*{
transition: all 0.3s ease;
}
button{
margin-top: 20px;
}
.animate{
animation: show 1s ease forwards;
}
#keyframes show{
from{
transform: translateX(-100%);
display: block;
}
to{
transform: translateX(0%);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table">
<div class="tr">
<div class="td">1</div>
<div class="td">2</div>
<div class="td">3</div>
</div>
<div class="tr">
<div class="td">1</div>
<div class="td">2</div>
<div class="td">3</div>
</div>
<div class="tr">
<div class="td">1</div>
<div class="td">2</div>
<div class="td">3</div>
</div>
</div>
<button class="show">Show</button>
Just as I finished posting the question, a friend of mine introduced me to the fadeToggle function available using JQuery. This is precisely what I was looking for.

The Slide Effect got some problems

When I click <div class="itemBox"> it's will be show the correspond <div class="workItem> with slide up effect.(every workItem has different id, itemBox also has different href, and it works correctly)
Every workItem has button to close itself, it look like fadeOut...but I need them close with slide down effect.
There is my code, and I need some suggestion.
HTML
<div class="itemBox">
<div class="wrap" style="background-image:url('img/01.jpg')"></div>
<div>titletitle</div>
</div>
<div class="itemBox">
<div class="wrap" style="background-image:url('img/02.jpg')"></div>
<div>titletitle</div>
</div>
<div class="itemBox">
<div class="wrap" style="background-image:url('img/01.jpg')"></div>
<div>titletitle</div>
</div>
The workItem ↓
<div class="workContent">
<div class="workItem customScroll" id="work1" style="background-color:#999999;">
<div class="wrapper" id="workBox1"></div>
</div>
<div class="workItem customScroll" id="work2" style="background-color:#333333;">
<div class="wrapper" id="workBox2"></div>
</div>
<div class="workItem customScroll" id="work3" style="background-color:#333333;">
<div class="wrapper" id="workBox3"></div>
</div>
</div>
JS
var refElement = [];
$('.workItem').each(function(index,el){
refElement[index] = $(this).attr('id');
$(".itemBox").each(function(index, el) {
$(this).on('click', 'a', function(e) {
var target = $(this).attr('href');
$('.workItem').removeClass('workOpen');
$('.workItem').removeClass('workClose');
$('.workItem').attr('style','');
if(refElement[index]=target) {
$(refElement[index]).removeClass('workClose');
$(refElement[index]).addClass('workOpen');
$('body').addClass('lockBody');
}
$('html, body').scrollTop(0);
return false;
});
});
});
function closeWork(){
$('.close').click(function(){
var workItem = $(this).parents('.workItem');
if(workItem.hasClass('workOpen')){
workItem.hide("slow",function(){
workItem.removeClass('workOpen');
workItem.addClass('workClose');
});
$('body').removeClass('lockBody');
}
});
}
CSS(SCSS)
.workItem {
display: none;
bottom:0;
&.workOpen {
display: block;
opacity: 1;
position: absolute;
color:#ffffff;
background-color: #787878;
z-index: 5;
overflow: auto;
height: calc(100% - 102px);
width: 100% !important;
left: 0;
animation-name: slide;
animation-duration: 1s;
animation-fill-mode: forwards;
-webkit-animation-name: slide;
-webkit-animation-duration: 1s;
-webkit-animation-fill-mode: forwards;
}
&.workClose {
bottom: 0;
opacity: 1;
height: 0;
}
img {
width: 100%;
margin-bottom: 40px;
}
}
#keyframes slide {
from {
height: 0;
}
to {
height: calc(100% - 102px);
}
}

How to make an outside div come from left on click and on ri-click go to right with jQuery toggle and animation?

The menu works ok, but have no animation. I want the .fullpagenav on click comes out from the left to right, and when re-clicked returns back (from right to left). It was great if you can do it with toggle and animation, only for the short code.
I found this code on the following topic: Slide to side with jquery on click and toggle
So, I have this following code:
$( ".secondary-toggle" ).click(function() {
$('.fullpagenav').animate({width:'toggle'},350);
});
.fullpagenav {
position:fixed;
height: 100%;
width:100%;
z-index: 2;
background-color:#464646;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fullpagenav">
<div id="secondary" class="secondary toggled-on" aria-expanded="true">
<nav id="site-navigation" class="main-navigation" role="navigation">
...
</nav>
</div>
</div>
Code above doesn't working, I create similiar code for you, to show You how could it be done. Its simply code, if you dont understand something, just ask me.
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script>
$(document).on('click', '.menu-item', function(e) {
var self = $(e.currentTarget);
self.toggleClass('menu-item-toggle')
});
</script>
<style>
.menu-item {
width: 50px;
height: 50px;
background-color: green;
position: relative;
left: 0;
transition: left 2s;
}
.menu-item-toggle {
left: 100px;
}
</style>
<div class="menu-item">Menu item</div>
https://jsfiddle.net/s7076ja4/
First you need to set it at the left most of the page and then create a class having position left:0 and then toggle that class on click and for the effects use transition.
$( ".secondary-toggle" ).click(function() {
if($(this).hasClass('active_nav')){
$('.fullpagenav').removeClass('active_nav');
}
else{
$('.fullpagenav').addClass('active_nav');
}
});
.fullpagenav {
position:fixed;
height: 100%;
width:100%;
z-index: 2;
background-color:#464646;
left:-100%;
transition: all 1s linear 1s;
-webkit-transition: all 1s linear 1s;
-moz-transition: all 1s linear 1s;
}
.active_nav{
left:0!important;
transition: all 1s linear 1s;
-webkit-transition: all 1s linear 1s;
-moz-transition: all 1s linear 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fullpagenav">
<div id="secondary" class="secondary toggled-on" aria-expanded="true">
<nav id="site-navigation" class="main-navigation" role="navigation">
...
</nav>
</div>
</div>
I placed the fullpagenav div to left most and on click on that div animates as you requested.
Below is the updated code
$( ".fullpagenav" ).click(function() {
$('.secondary').animate({width:'toggle'},350);
});
.fullpagenav {
position: fixed;
height: 100%;
width: 1%;
margin-left: -1%;
}
.secondary {
position: fixed;
height: 100%;
width: 10%;
background-color: #464646;
display: none;
padding-left: 1%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fullpagenav">
<div id="secondary" class="secondary toggled-on" aria-expanded="true">
<nav id="site-navigation" class="main-navigation" role="navigation">
...
</nav>
</div>
</div>

Categories