How to avoid conflicts between jquery scripts that cause jumping animation in mobile resolution
0
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 ($(window).width() >1024)
I have tried to disable the code jquery script responsible for SlideUp and Slidedown by using this condition using the condition ($(window).width() >1024) in mobile resolution but The accordion in desktop resolution is not working
with the condition ($(window).width() >1024) :
expected result :
- displaying subcategories of each category in desktop resolution by using slideup and slidedown works perfectly
- displaying subcategories with click action of each category in mobile resolution without jumping animation
actual result :
- items of subcategories are not displaying in desktop resolution
- displaying subcategories with click action of each category in mobile resolution without jumping animation
jsfiddle with condition
without the condition ($(window).width() >1024)
expected result :
- displaying subcategories of each category in desktop resolution by using slideup and slidedown works perfectly
- displaying subcategories with click action of each category in mobile resolution without jumping animation
actual result :
- displaying subcategories of each category in desktop resolution by using slideup and slidedown works perfectly
- displaying subcategories with click action of each category in mobile resolution with jumping animation
jsfiddle without condition
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()
});
}
else
{
$(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>javascript jquery html css animation
asked Jan 1 at 11:08
jack johnjack john
356
add a comment |
0
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 ($(window).width() >1024)
I have tried to disable the code jquery script responsible for SlideUp and Slidedown by using this condition using the condition ($(window).width() >1024) in mobile resolution but The accordion in desktop resolution is not working
with the condition ($(window).width() >1024) :
expected result :
- displaying subcategories of each category in desktop resolution by using slideup and slidedown works perfectly
- displaying subcategories with click action of each category in mobile resolution without jumping animation
actual result :
- items of subcategories are not displaying in desktop resolution
- displaying subcategories with click action of each category in mobile resolution without jumping animation
jsfiddle with condition
without the condition ($(window).width() >1024)
expected result :
- displaying subcategories of each category in desktop resolution by using slideup and slidedown works perfectly
- displaying subcategories with click action of each category in mobile resolution without jumping animation
actual result :
- displaying subcategories of each category in desktop resolution by using slideup and slidedown works perfectly
- displaying subcategories with click action of each category in mobile resolution with jumping animation
jsfiddle without condition
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()
});
}
else
{
$(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>javascript jquery html css animation
asked Jan 1 at 11:08
jack johnjack john
356
add a comment |
0
0
0
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 ($(window).width() >1024)
I have tried to disable the code jquery script responsible for SlideUp and Slidedown by using this condition using the condition ($(window).width() >1024) in mobile resolution but The accordion in desktop resolution is not working
with the condition ($(window).width() >1024) :
expected result :
- displaying subcategories of each category in desktop resolution by using slideup and slidedown works perfectly
- displaying subcategories with click action of each category in mobile resolution without jumping animation
actual result :
- items of subcategories are not displaying in desktop resolution
- displaying subcategories with click action of each category in mobile resolution without jumping animation
jsfiddle with condition
without the condition ($(window).width() >1024)
expected result :
- displaying subcategories of each category in desktop resolution by using slideup and slidedown works perfectly
- displaying subcategories with click action of each category in mobile resolution without jumping animation
actual result :
- displaying subcategories of each category in desktop resolution by using slideup and slidedown works perfectly
- displaying subcategories with click action of each category in mobile resolution with jumping animation
jsfiddle without condition
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()
});
}
else
{
$(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>javascript jquery html css animation
asked Jan 1 at 11:08
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 ($(window).width() >1024)
I have tried to disable the code jquery script responsible for SlideUp and Slidedown by using this condition using the condition ($(window).width() >1024) in mobile resolution but The accordion in desktop resolution is not working
with the condition ($(window).width() >1024) :
expected result :
- displaying subcategories of each category in desktop resolution by using slideup and slidedown works perfectly
- displaying subcategories with click action of each category in mobile resolution without jumping animation
actual result :
- items of subcategories are not displaying in desktop resolution
- displaying subcategories with click action of each category in mobile resolution without jumping animation
jsfiddle with condition
without the condition ($(window).width() >1024)
expected result :
- displaying subcategories of each category in desktop resolution by using slideup and slidedown works perfectly
- displaying subcategories with click action of each category in mobile resolution without jumping animation
actual result :
- displaying subcategories of each category in desktop resolution by using slideup and slidedown works perfectly
- displaying subcategories with click action of each category in mobile resolution with jumping animation
jsfiddle without condition
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()
});
}
else
{
$(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()
});
}
else
{
$(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()
});
}
else
{
$(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>javascript jquery html css animation
javascript jquery html css animation
asked Jan 1 at 11:08
jack johnjack john
356
asked Jan 1 at 11:08
jack johnjack john
356
edited Jan 1 at 12:58
jack john
asked Jan 1 at 11:08
jack johnjack john
356
asked Jan 1 at 11:08
jack johnjack john
356
asked Jan 1 at 11:08
jack johnjack john
356
356
add a comment |
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%2f53994952%2fhow-to-avoid-conflicts-between-jquery-scripts-that-cause-jumping-animation-in-mo%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%2f53994952%2fhow-to-avoid-conflicts-between-jquery-scripts-that-cause-jumping-animation-in-mo%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
