Is there a way to avoid the problem of jumping animation of slideDown() and SlideUp() in mobile resolution?
1
I want to display the subcategories of each category.
The action of displaying subcategories is different, i want to use hover in desktop resolution and click for mobile resolution
the problem is items of subcategories are not displaying in desktop resolution
and problem of jumping animation when we are not using the condition if($(window).width() >1024)
i have tried to disable the code jquery script responsible for slideUp and down in mobile resolution
if($(window).width() >1024) {
jQuery(function ($) {
$('ul.r-list li').hover(function () {
$(this).find('ul').stop(true,true).slideDown()
},function(){
$(this).find('ul').stop(true,true).slideUp()
}).find($(this).next()).hide()
});
}
but it doesn't works
expected result :
- no problem of jumping animation in mobile resolution
- displaying subcategories of each category in desktop resolution by using slideup and down works perfectly
actual result :
- items of subcategories are not displaying in desktop resolution
- problem of jumping animation when we are not using the condition if($(window).width() >1024)
if($(window).width() >1024) {
jQuery(function ($) {
$('ul.r-list li').hover(function () {
$(this).find('ul').stop(true,true).slideDown()
},function(){
$(this).find('ul').stop(true,true).slideUp()
}).find($(this).next()).hide()
});
}
$(document).ready(function(event){
$('.r-list h1 span').click(function(){
var $parent = $(this).parent().parent();
if($parent.hasClass('active')){
$parent.removeClass('active');
$(this).find('i').removeClass('fa-caret-down');
$(this).find('i').addClass('fa-caret-right');
} else {
$parent.addClass('active');
$(this).find('i').removeClass('fa-caret-right');
$(this).find('i').addClass('fa-caret-down');
}
});
});ul.r-list li ul {
display:none;
list-style:none;
}
.fa
{
display:none;
}
ul.r-list{
list-style:none;
}
ul.r-list a{
text-decoration:none;
}
@media only screen and (max-width: 1024px)
{
ul.r-list li h1 {
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: bold;
font-size: 16px;
border-radius: 3px;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
border-color: #eaeaea;
color: #069;
background-color: #f7f7f7;
text-shadow: 0 1px 1px white;
}
ul.r-list li a.sub-category {
text-decoration: none;
white-space: nowrap;
/* overflow: hidden; */
text-overflow: ellipsis;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
font-weight: bold;
display: inline-block;
padding: 10px;
border-radius: 3px;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
font-size: 0.8em;
border-color: #eaeaea;
color: #069;
background-color: #f7f7f7;
text-shadow: 0 1px 1px white;
}
.fa {
display: block;
float: left;
width: 12px;
}
ul.r-list li {
position: relative;
margin-bottom: 5px;
margin-right:0;
padding: 0;
}
ul.r-list li ul{
-webkit-transition: opacity 1s ease-out;
opacity: 0;
height: 0;
overflow: hidden;
}
ul.r-list li.active ul{
opacity: 1;
height: auto;
margin:0;
padding:5px 0 0 0;
margin-bottom:5px;
width:100%;
display:block;
}
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="r-list">
<li>
<h1>
<span class="collapse resp-toggle"><i class="fa fa-caret-right fa-lg"></i></span>
<a class="category Parent" href="">Parent Category1</a>
</h1>
<ul>
<li>
<a class="category sub-category children1" href="">sub Category1</a>
</li>
<li>
<a class="category sub-category children2" href="">sub Category2</a>
</li>
<li>
<a class="category sub-category children3" href="">sub Category3</a>
</li>
</ul>
</li>
</ul>
<ul class="r-list">
<li>
<h1>
<span class="collapse resp-toggle"><i class="fa fa-caret-right fa-lg"></i></span>
<a class="category Parent" href="">Parent Category2</a>
</h1>
<ul>
<li>
<a class="category sub-category children1" href="">sub Category1</a>
</li>
<li>
<a class="category sub-category children2" href="">sub Category2</a>
</li>
<li>
<a class="category sub-category children3" href="">sub Category3</a>
</li>
</ul>
</li>
</ul>in jsfiddle
jquery html css animation
asked Dec 31 '18 at 12:47
jack johnjack john
356
add a comment |
1
I want to display the subcategories of each category.
The action of displaying subcategories is different, i want to use hover in desktop resolution and click for mobile resolution
the problem is items of subcategories are not displaying in desktop resolution
and problem of jumping animation when we are not using the condition if($(window).width() >1024)
i have tried to disable the code jquery script responsible for slideUp and down in mobile resolution
if($(window).width() >1024) {
jQuery(function ($) {
$('ul.r-list li').hover(function () {
$(this).find('ul').stop(true,true).slideDown()
},function(){
$(this).find('ul').stop(true,true).slideUp()
}).find($(this).next()).hide()
});
}
but it doesn't works
expected result :
- no problem of jumping animation in mobile resolution
- displaying subcategories of each category in desktop resolution by using slideup and down works perfectly
actual result :
- items of subcategories are not displaying in desktop resolution
- problem of jumping animation when we are not using the condition if($(window).width() >1024)
if($(window).width() >1024) {
jQuery(function ($) {
$('ul.r-list li').hover(function () {
$(this).find('ul').stop(true,true).slideDown()
},function(){
$(this).find('ul').stop(true,true).slideUp()
}).find($(this).next()).hide()
});
}
$(document).ready(function(event){
$('.r-list h1 span').click(function(){
var $parent = $(this).parent().parent();
if($parent.hasClass('active')){
$parent.removeClass('active');
$(this).find('i').removeClass('fa-caret-down');
$(this).find('i').addClass('fa-caret-right');
} else {
$parent.addClass('active');
$(this).find('i').removeClass('fa-caret-right');
$(this).find('i').addClass('fa-caret-down');
}
});
});ul.r-list li ul {
display:none;
list-style:none;
}
.fa
{
display:none;
}
ul.r-list{
list-style:none;
}
ul.r-list a{
text-decoration:none;
}
@media only screen and (max-width: 1024px)
{
ul.r-list li h1 {
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: bold;
font-size: 16px;
border-radius: 3px;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
border-color: #eaeaea;
color: #069;
background-color: #f7f7f7;
text-shadow: 0 1px 1px white;
}
ul.r-list li a.sub-category {
text-decoration: none;
white-space: nowrap;
/* overflow: hidden; */
text-overflow: ellipsis;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
font-weight: bold;
display: inline-block;
padding: 10px;
border-radius: 3px;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
font-size: 0.8em;
border-color: #eaeaea;
color: #069;
background-color: #f7f7f7;
text-shadow: 0 1px 1px white;
}
.fa {
display: block;
float: left;
width: 12px;
}
ul.r-list li {
position: relative;
margin-bottom: 5px;
margin-right:0;
padding: 0;
}
ul.r-list li ul{
-webkit-transition: opacity 1s ease-out;
opacity: 0;
height: 0;
overflow: hidden;
}
ul.r-list li.active ul{
opacity: 1;
height: auto;
margin:0;
padding:5px 0 0 0;
margin-bottom:5px;
width:100%;
display:block;
}
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="r-list">
<li>
<h1>
<span class="collapse resp-toggle"><i class="fa fa-caret-right fa-lg"></i></span>
<a class="category Parent" href="">Parent Category1</a>
</h1>
<ul>
<li>
<a class="category sub-category children1" href="">sub Category1</a>
</li>
<li>
<a class="category sub-category children2" href="">sub Category2</a>
</li>
<li>
<a class="category sub-category children3" href="">sub Category3</a>
</li>
</ul>
</li>
</ul>
<ul class="r-list">
<li>
<h1>
<span class="collapse resp-toggle"><i class="fa fa-caret-right fa-lg"></i></span>
<a class="category Parent" href="">Parent Category2</a>
</h1>
<ul>
<li>
<a class="category sub-category children1" href="">sub Category1</a>
</li>
<li>
<a class="category sub-category children2" href="">sub Category2</a>
</li>
<li>
<a class="category sub-category children3" href="">sub Category3</a>
</li>
</ul>
</li>
</ul>in jsfiddle
jquery html css animation
asked Dec 31 '18 at 12:47
jack johnjack john
356
Your snippet is not working.
– Just code
Dec 31 '18 at 12:50
i have tested my snippet is working from my home if not can you check here : jsfiddle.net/kq6580Lh/25
– jack john
Dec 31 '18 at 13:08
add a comment |
1
1
1
I want to display the subcategories of each category.
The action of displaying subcategories is different, i want to use hover in desktop resolution and click for mobile resolution
the problem is items of subcategories are not displaying in desktop resolution
and problem of jumping animation when we are not using the condition if($(window).width() >1024)
i have tried to disable the code jquery script responsible for slideUp and down in mobile resolution
if($(window).width() >1024) {
jQuery(function ($) {
$('ul.r-list li').hover(function () {
$(this).find('ul').stop(true,true).slideDown()
},function(){
$(this).find('ul').stop(true,true).slideUp()
}).find($(this).next()).hide()
});
}
but it doesn't works
expected result :
- no problem of jumping animation in mobile resolution
- displaying subcategories of each category in desktop resolution by using slideup and down works perfectly
actual result :
- items of subcategories are not displaying in desktop resolution
- problem of jumping animation when we are not using the condition if($(window).width() >1024)
if($(window).width() >1024) {
jQuery(function ($) {
$('ul.r-list li').hover(function () {
$(this).find('ul').stop(true,true).slideDown()
},function(){
$(this).find('ul').stop(true,true).slideUp()
}).find($(this).next()).hide()
});
}
$(document).ready(function(event){
$('.r-list h1 span').click(function(){
var $parent = $(this).parent().parent();
if($parent.hasClass('active')){
$parent.removeClass('active');
$(this).find('i').removeClass('fa-caret-down');
$(this).find('i').addClass('fa-caret-right');
} else {
$parent.addClass('active');
$(this).find('i').removeClass('fa-caret-right');
$(this).find('i').addClass('fa-caret-down');
}
});
});ul.r-list li ul {
display:none;
list-style:none;
}
.fa
{
display:none;
}
ul.r-list{
list-style:none;
}
ul.r-list a{
text-decoration:none;
}
@media only screen and (max-width: 1024px)
{
ul.r-list li h1 {
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: bold;
font-size: 16px;
border-radius: 3px;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
border-color: #eaeaea;
color: #069;
background-color: #f7f7f7;
text-shadow: 0 1px 1px white;
}
ul.r-list li a.sub-category {
text-decoration: none;
white-space: nowrap;
/* overflow: hidden; */
text-overflow: ellipsis;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
font-weight: bold;
display: inline-block;
padding: 10px;
border-radius: 3px;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
font-size: 0.8em;
border-color: #eaeaea;
color: #069;
background-color: #f7f7f7;
text-shadow: 0 1px 1px white;
}
.fa {
display: block;
float: left;
width: 12px;
}
ul.r-list li {
position: relative;
margin-bottom: 5px;
margin-right:0;
padding: 0;
}
ul.r-list li ul{
-webkit-transition: opacity 1s ease-out;
opacity: 0;
height: 0;
overflow: hidden;
}
ul.r-list li.active ul{
opacity: 1;
height: auto;
margin:0;
padding:5px 0 0 0;
margin-bottom:5px;
width:100%;
display:block;
}
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="r-list">
<li>
<h1>
<span class="collapse resp-toggle"><i class="fa fa-caret-right fa-lg"></i></span>
<a class="category Parent" href="">Parent Category1</a>
</h1>
<ul>
<li>
<a class="category sub-category children1" href="">sub Category1</a>
</li>
<li>
<a class="category sub-category children2" href="">sub Category2</a>
</li>
<li>
<a class="category sub-category children3" href="">sub Category3</a>
</li>
</ul>
</li>
</ul>
<ul class="r-list">
<li>
<h1>
<span class="collapse resp-toggle"><i class="fa fa-caret-right fa-lg"></i></span>
<a class="category Parent" href="">Parent Category2</a>
</h1>
<ul>
<li>
<a class="category sub-category children1" href="">sub Category1</a>
</li>
<li>
<a class="category sub-category children2" href="">sub Category2</a>
</li>
<li>
<a class="category sub-category children3" href="">sub Category3</a>
</li>
</ul>
</li>
</ul>in jsfiddle
jquery html css animation
asked Dec 31 '18 at 12:47
jack johnjack john
356
I want to display the subcategories of each category.
The action of displaying subcategories is different, i want to use hover in desktop resolution and click for mobile resolution
the problem is items of subcategories are not displaying in desktop resolution
and problem of jumping animation when we are not using the condition if($(window).width() >1024)
i have tried to disable the code jquery script responsible for slideUp and down in mobile resolution
if($(window).width() >1024) {
jQuery(function ($) {
$('ul.r-list li').hover(function () {
$(this).find('ul').stop(true,true).slideDown()
},function(){
$(this).find('ul').stop(true,true).slideUp()
}).find($(this).next()).hide()
});
}
but it doesn't works
expected result :
- no problem of jumping animation in mobile resolution
- displaying subcategories of each category in desktop resolution by using slideup and down works perfectly
actual result :
- items of subcategories are not displaying in desktop resolution
- problem of jumping animation when we are not using the condition if($(window).width() >1024)
if($(window).width() >1024) {
jQuery(function ($) {
$('ul.r-list li').hover(function () {
$(this).find('ul').stop(true,true).slideDown()
},function(){
$(this).find('ul').stop(true,true).slideUp()
}).find($(this).next()).hide()
});
}
$(document).ready(function(event){
$('.r-list h1 span').click(function(){
var $parent = $(this).parent().parent();
if($parent.hasClass('active')){
$parent.removeClass('active');
$(this).find('i').removeClass('fa-caret-down');
$(this).find('i').addClass('fa-caret-right');
} else {
$parent.addClass('active');
$(this).find('i').removeClass('fa-caret-right');
$(this).find('i').addClass('fa-caret-down');
}
});
});ul.r-list li ul {
display:none;
list-style:none;
}
.fa
{
display:none;
}
ul.r-list{
list-style:none;
}
ul.r-list a{
text-decoration:none;
}
@media only screen and (max-width: 1024px)
{
ul.r-list li h1 {
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: bold;
font-size: 16px;
border-radius: 3px;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
border-color: #eaeaea;
color: #069;
background-color: #f7f7f7;
text-shadow: 0 1px 1px white;
}
ul.r-list li a.sub-category {
text-decoration: none;
white-space: nowrap;
/* overflow: hidden; */
text-overflow: ellipsis;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
font-weight: bold;
display: inline-block;
padding: 10px;
border-radius: 3px;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
font-size: 0.8em;
border-color: #eaeaea;
color: #069;
background-color: #f7f7f7;
text-shadow: 0 1px 1px white;
}
.fa {
display: block;
float: left;
width: 12px;
}
ul.r-list li {
position: relative;
margin-bottom: 5px;
margin-right:0;
padding: 0;
}
ul.r-list li ul{
-webkit-transition: opacity 1s ease-out;
opacity: 0;
height: 0;
overflow: hidden;
}
ul.r-list li.active ul{
opacity: 1;
height: auto;
margin:0;
padding:5px 0 0 0;
margin-bottom:5px;
width:100%;
display:block;
}
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="r-list">
<li>
<h1>
<span class="collapse resp-toggle"><i class="fa fa-caret-right fa-lg"></i></span>
<a class="category Parent" href="">Parent Category1</a>
</h1>
<ul>
<li>
<a class="category sub-category children1" href="">sub Category1</a>
</li>
<li>
<a class="category sub-category children2" href="">sub Category2</a>
</li>
<li>
<a class="category sub-category children3" href="">sub Category3</a>
</li>
</ul>
</li>
</ul>
<ul class="r-list">
<li>
<h1>
<span class="collapse resp-toggle"><i class="fa fa-caret-right fa-lg"></i></span>
<a class="category Parent" href="">Parent Category2</a>
</h1>
<ul>
<li>
<a class="category sub-category children1" href="">sub Category1</a>
</li>
<li>
<a class="category sub-category children2" href="">sub Category2</a>
</li>
<li>
<a class="category sub-category children3" href="">sub Category3</a>
</li>
</ul>
</li>
</ul>in jsfiddle
if($(window).width() >1024) {
jQuery(function ($) {
$('ul.r-list li').hover(function () {
$(this).find('ul').stop(true,true).slideDown()
},function(){
$(this).find('ul').stop(true,true).slideUp()
}).find($(this).next()).hide()
});
}
$(document).ready(function(event){
$('.r-list h1 span').click(function(){
var $parent = $(this).parent().parent();
if($parent.hasClass('active')){
$parent.removeClass('active');
$(this).find('i').removeClass('fa-caret-down');
$(this).find('i').addClass('fa-caret-right');
} else {
$parent.addClass('active');
$(this).find('i').removeClass('fa-caret-right');
$(this).find('i').addClass('fa-caret-down');
}
});
});ul.r-list li ul {
display:none;
list-style:none;
}
.fa
{
display:none;
}
ul.r-list{
list-style:none;
}
ul.r-list a{
text-decoration:none;
}
@media only screen and (max-width: 1024px)
{
ul.r-list li h1 {
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: bold;
font-size: 16px;
border-radius: 3px;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
border-color: #eaeaea;
color: #069;
background-color: #f7f7f7;
text-shadow: 0 1px 1px white;
}
ul.r-list li a.sub-category {
text-decoration: none;
white-space: nowrap;
/* overflow: hidden; */
text-overflow: ellipsis;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
font-weight: bold;
display: inline-block;
padding: 10px;
border-radius: 3px;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
font-size: 0.8em;
border-color: #eaeaea;
color: #069;
background-color: #f7f7f7;
text-shadow: 0 1px 1px white;
}
.fa {
display: block;
float: left;
width: 12px;
}
ul.r-list li {
position: relative;
margin-bottom: 5px;
margin-right:0;
padding: 0;
}
ul.r-list li ul{
-webkit-transition: opacity 1s ease-out;
opacity: 0;
height: 0;
overflow: hidden;
}
ul.r-list li.active ul{
opacity: 1;
height: auto;
margin:0;
padding:5px 0 0 0;
margin-bottom:5px;
width:100%;
display:block;
}
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="r-list">
<li>
<h1>
<span class="collapse resp-toggle"><i class="fa fa-caret-right fa-lg"></i></span>
<a class="category Parent" href="">Parent Category1</a>
</h1>
<ul>
<li>
<a class="category sub-category children1" href="">sub Category1</a>
</li>
<li>
<a class="category sub-category children2" href="">sub Category2</a>
</li>
<li>
<a class="category sub-category children3" href="">sub Category3</a>
</li>
</ul>
</li>
</ul>
<ul class="r-list">
<li>
<h1>
<span class="collapse resp-toggle"><i class="fa fa-caret-right fa-lg"></i></span>
<a class="category Parent" href="">Parent Category2</a>
</h1>
<ul>
<li>
<a class="category sub-category children1" href="">sub Category1</a>
</li>
<li>
<a class="category sub-category children2" href="">sub Category2</a>
</li>
<li>
<a class="category sub-category children3" href="">sub Category3</a>
</li>
</ul>
</li>
</ul>if($(window).width() >1024) {
jQuery(function ($) {
$('ul.r-list li').hover(function () {
$(this).find('ul').stop(true,true).slideDown()
},function(){
$(this).find('ul').stop(true,true).slideUp()
}).find($(this).next()).hide()
});
}
$(document).ready(function(event){
$('.r-list h1 span').click(function(){
var $parent = $(this).parent().parent();
if($parent.hasClass('active')){
$parent.removeClass('active');
$(this).find('i').removeClass('fa-caret-down');
$(this).find('i').addClass('fa-caret-right');
} else {
$parent.addClass('active');
$(this).find('i').removeClass('fa-caret-right');
$(this).find('i').addClass('fa-caret-down');
}
});
});ul.r-list li ul {
display:none;
list-style:none;
}
.fa
{
display:none;
}
ul.r-list{
list-style:none;
}
ul.r-list a{
text-decoration:none;
}
@media only screen and (max-width: 1024px)
{
ul.r-list li h1 {
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: bold;
font-size: 16px;
border-radius: 3px;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
border-color: #eaeaea;
color: #069;
background-color: #f7f7f7;
text-shadow: 0 1px 1px white;
}
ul.r-list li a.sub-category {
text-decoration: none;
white-space: nowrap;
/* overflow: hidden; */
text-overflow: ellipsis;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
font-weight: bold;
display: inline-block;
padding: 10px;
border-radius: 3px;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
font-size: 0.8em;
border-color: #eaeaea;
color: #069;
background-color: #f7f7f7;
text-shadow: 0 1px 1px white;
}
.fa {
display: block;
float: left;
width: 12px;
}
ul.r-list li {
position: relative;
margin-bottom: 5px;
margin-right:0;
padding: 0;
}
ul.r-list li ul{
-webkit-transition: opacity 1s ease-out;
opacity: 0;
height: 0;
overflow: hidden;
}
ul.r-list li.active ul{
opacity: 1;
height: auto;
margin:0;
padding:5px 0 0 0;
margin-bottom:5px;
width:100%;
display:block;
}
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="r-list">
<li>
<h1>
<span class="collapse resp-toggle"><i class="fa fa-caret-right fa-lg"></i></span>
<a class="category Parent" href="">Parent Category1</a>
</h1>
<ul>
<li>
<a class="category sub-category children1" href="">sub Category1</a>
</li>
<li>
<a class="category sub-category children2" href="">sub Category2</a>
</li>
<li>
<a class="category sub-category children3" href="">sub Category3</a>
</li>
</ul>
</li>
</ul>
<ul class="r-list">
<li>
<h1>
<span class="collapse resp-toggle"><i class="fa fa-caret-right fa-lg"></i></span>
<a class="category Parent" href="">Parent Category2</a>
</h1>
<ul>
<li>
<a class="category sub-category children1" href="">sub Category1</a>
</li>
<li>
<a class="category sub-category children2" href="">sub Category2</a>
</li>
<li>
<a class="category sub-category children3" href="">sub Category3</a>
</li>
</ul>
</li>
</ul>jquery html css animation
jquery html css animation
asked Dec 31 '18 at 12:47
jack johnjack john
356
asked Dec 31 '18 at 12:47
jack johnjack john
356
edited Dec 31 '18 at 13:36
jack john
asked Dec 31 '18 at 12:47
jack johnjack john
356
asked Dec 31 '18 at 12:47
jack johnjack john
356
asked Dec 31 '18 at 12:47
jack johnjack john
356
356
Your snippet is not working.
– Just code
Dec 31 '18 at 12:50
i have tested my snippet is working from my home if not can you check here : jsfiddle.net/kq6580Lh/25
– jack john
Dec 31 '18 at 13:08
add a comment |
Your snippet is not working.
– Just code
Dec 31 '18 at 12:50
i have tested my snippet is working from my home if not can you check here : jsfiddle.net/kq6580Lh/25
– jack john
Dec 31 '18 at 13:08
Your snippet is not working.
– Just code
Dec 31 '18 at 12:50
Your snippet is not working.
– Just code
Dec 31 '18 at 12:50
i have tested my snippet is working from my home if not can you check here : jsfiddle.net/kq6580Lh/25
– jack john
Dec 31 '18 at 13:08
i have tested my snippet is working from my home if not can you check here : jsfiddle.net/kq6580Lh/25
– jack john
Dec 31 '18 at 13:08
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53987702%2fis-there-a-way-to-avoid-the-problem-of-jumping-animation-of-slidedown-and-slid%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53987702%2fis-there-a-way-to-avoid-the-problem-of-jumping-animation-of-slidedown-and-slid%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Your snippet is not working.
– Just code
Dec 31 '18 at 12:50
i have tested my snippet is working from my home if not can you check here : jsfiddle.net/kq6580Lh/25
– jack john
Dec 31 '18 at 13:08