I successfully added a custom in animation on the owl carousel, but I can't find the right event or way to add a slide out animation.
Any ideas or thoughts?
Here is custom in animation:
var owl = $('.custom1').owlCarousel({
items:1,
margin:30,
stagePadding:30,
smartSpeed:450,
loop: true,
dots: true,
autoplay: true,
});
owl.on('change.owl.carousel', function (event) {
var el = event.target;
$('.m, .c', el).addClass('slideInRight animated')
.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
$('.m, .c', el).removeClass('slideInRight animated');
});
});
#demos .owl-carousel .item {
padding: 0 !important;
display: flex;
background: none !important;
}
.m-wrapper,
.c-wrapper,
.m,
.c {
display: block;
height: 100%;
overflow: hidden;
}
.m-wrapper,
.c-wrapper {
width: 50%
}
.m1 {
background: blue;
}
.m2 {
background: red;
}
.m3 {
background: yellow;
}
.c {
padding: 1rem;
background: #4DC7A0;
}
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/css/docs.theme.min.css" rel="stylesheet"/>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/css/animate.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<section id="demos">
<div class="custom1 owl-carousel owl-theme">
<div class="item"><div class="m-wrapper"><div class="m m1"></div></div><div class="c-wrapper"><div class="c"><h4>1</h4></div></div>
</div><div class="item"><div class="m-wrapper"><div class="m m2"></div></div><div class="c-wrapper"><div class="c"><h4>2</h4></div></div>
</div><div class="item"><div class="m-wrapper"><div class="m m3"></div></div><div class="c-wrapper"><div class="c"><h4>3</h4></div></div>
</div>
</div>
</section>
My aim is to add an slideOutLeft animation, so that media (.m) and the content (.c) element slide out smooth to the left. There are different events like translate.owl.carousel but it seems like they are not firing in the right moment.
Related
I have a div with multiple images that when hovered on the images triggers a popover that contains the image that was hovered on and It kinda works. The problem is when I hover on another image It appends the new hovered image to the popover but it doesn't remove the previous hovered image. I tried to remove the previous image in popover but whenever I do it breaks the program and the hovered image doesn't show on the popover anymore. Where did I go wrong? How can I make the specific hovered image only show on the triggered popover?
I commented out what I tried to remove the previous image before appending the new image so that you guys can look at the current iterating image without the program breaking.
UPDATE:
After I remove the previously appended image the program doesn't show the image in the popover but when you inspect the element it shows that the image is there for some reason it is not visible in the popover though. Confusing..??
function appendImg() {
const newId = parseInt($('.infoBar').children().last().attr('id').replace('test', ''))
$('.infoBar').append('<div class="imgWrap" id="test' + (newId + 1) + '"><img src="https://source.unsplash.com/user/c_v_r/100x100"></div>')
addEvent();
}
var popOverSettings2 = {
selector: '.infoBar .imgWrap',
container: 'body',
html: true,
trigger: "manual",
placement: 'top',
sanitize: false,
animation: false,
content: function() {
setTimeout(() => {
$('.popover').css({
'width': '20%',
'height': '20%',
'overflow': 'auto'
})
})
if ($(this).attr('class') == 'imgWrap') {
const currnetInfoBarElementView = $(this).attr('id')
let source = $("#" + currnetInfoBarElementView).children()
//This is what I tried removing the previous appended container so that it won't iterate but it doesn't work
//$('.infoBarElementContentView').remove()
$('.infoBarPopoverContent').append('<div class="infoBarElementContentView"></div>')
source.clone(true).addClass('dataDisplayClone').appendTo('.infoBarElementContentView')
$('.dataDisplayClone img').css({
'width': '100%',
'height': '100%'
})
return $('.infoBarPopoverContent').html();
}
}
}
function addEvent() {
$(function() {
$('.infoBar .imgWrap').popover(popOverSettings2)
.on("mouseenter", function() {
var _this = this;
$(this).popover("show");
$(".popover").on("mouseleave", function() {
$(_this).popover('hide');
});
}).on("mouseleave", function() {
var _this = this;
if (!$(".popover:hover").length) {
$('.popover').popover('hide');
}
});
});
}
addEvent()
button {
position: absolute;
top: 0%;
left: 0%;
}
.infoBar {
display: flex;
flex-direction: row;
position: absolute;
top: 30%;
max-width: 95%;
height: 160px;
margin: auto;
column-gap: 25px;
background-color: green;
overflow-x: auto;
}
.infoBar .imgWrap {
height: 100%;
cursor: pointer;
}
.infoBar .imgWrap img {
height: 100%;
cursor: pointer;
}
.infoBarPopoverContent {
display: none;
}
.popover .popover-body {
overflow-x: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<button onclick='appendImg()'>Click to append img</button>
<div class="infoBar" id="infoBar">
<div class="imgWrap" id='test1'><img src="https://picsum.photos/200/300"></div>
<div class="imgWrap" id='test2'><img src="https://picsum.photos/200/300"></div>
<div class="imgWrap" id='test3'><img src="https://picsum.photos/200/300"></div>
<div class="imgWrap" id='test4'><img src="https://picsum.photos/200/300"></div>
<div class="imgWrap" id='test5'><img src="https://picsum.photos/200/300"></div>
</div>
<div class="infoBarPopoverContent"></div>
You have to empty .infoBarPopoverContent before you add the current image to it.
So this:
$('.infoBarPopoverContent')
.append('<div class="infoBarElementContentView"></div>')
becomes this:
$('.infoBarPopoverContent')
.empty()
.append('<div class="infoBarElementContentView"></div>')
See it working:
function appendImg() {
const newId = parseInt($('.infoBar').children().last().attr('id').replace('test', ''))
$('.infoBar').append('<div class="imgWrap" id="test' + (newId + 1) + '"><img src="https://source.unsplash.com/user/c_v_r/100x100"></div>')
addEvent();
}
var popOverSettings2 = {
selector: '.infoBar .imgWrap',
container: 'body',
html: true,
trigger: "manual",
placement: 'top',
sanitize: false,
animation: false,
content: function() {
setTimeout(() => {
$('.popover').css({
'width': '20%',
'height': '20%',
'overflow': 'auto'
})
})
if ($(this).attr('class') == 'imgWrap') {
const currnetInfoBarElementView = $(this).attr('id')
let source = $("#" + currnetInfoBarElementView).children()
//This is what I tried removing the previous appended container so that it won't iterate but it doesn't work
//$('.infoBarElementContentView').remove()
$('.infoBarPopoverContent').empty().append('<div class="infoBarElementContentView"></div>')
source.clone(true).addClass('dataDisplayClone').appendTo('.infoBarElementContentView')
$('.dataDisplayClone img').css({
'width': '100%',
'height': '100%'
})
return $('.infoBarPopoverContent').html();
}
}
}
function addEvent() {
$(function() {
$('.infoBar .imgWrap').popover(popOverSettings2)
.on("mouseenter", function() {
var _this = this;
$(this).popover("show");
$(".popover").on("mouseleave", function() {
$(_this).popover('hide');
});
}).on("mouseleave", function() {
var _this = this;
if (!$(".popover:hover").length) {
$('.popover').popover('hide');
}
});
});
}
addEvent()
button {
position: absolute;
top: 0%;
left: 0%;
}
.infoBar {
display: flex;
flex-direction: row;
position: absolute;
top: 30%;
max-width: 95%;
height: 160px;
margin: auto;
column-gap: 25px;
background-color: green;
overflow-x: auto;
}
.infoBar .imgWrap {
height: 100%;
cursor: pointer;
}
.infoBar .imgWrap img {
height: 100%;
cursor: pointer;
}
.infoBarPopoverContent {
display: none;
}
.popover .popover-body {
overflow-x: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<button onclick='appendImg()'>Click to append img</button>
<div class="infoBar" id="infoBar">
<div class="imgWrap" id='test1'><img src="https://picsum.photos/200/300"></div>
<div class="imgWrap" id='test2'><img src="https://picsum.photos/200/300"></div>
<div class="imgWrap" id='test3'><img src="https://picsum.photos/200/300"></div>
<div class="imgWrap" id='test4'><img src="https://picsum.photos/200/300"></div>
<div class="imgWrap" id='test5'><img src="https://picsum.photos/200/300"></div>
</div>
<div class="infoBarPopoverContent"></div>
I have a div with multiple images with each image having a popover with content attached to it and it works fine. The problem I'm having is I wanted to trigger the image popover by hover and the method I'm using right now works fine for static images but When I dynamically add images to the main div and hover on that image a popover won't trigger. How can I adjust my code so that it also supports any dynamically added elements? Any help is appreciated. Thanks in advance.
To replicate click on the append button and scroll to the far right and hover on the newly added image, that image won't trigger a popover on hover but the other static ones do.
function appendImg() {
$('.infoBar').append('<div class="imgWrap"><img src="https://source.unsplash.com/user/c_v_r/100x100"></div>')
}
var popOverSettings2 = {
selector: '.infoBar .imgWrap',
container: 'body',
html: true,
trigger: "manual",
placement: 'top',
sanitize: false,
animation: false,
content: function() {
setTimeout(() => {
$('.popover').css({
'width': '20%',
'height': '20%',
'overflow': 'auto'
})
})
$('.infoBarPopoverContent').append('<p>Popover stuff...</p>')
return $('.infoBarPopoverContent').html();
}
}
$(function() {
$('.infoBar .imgWrap').popover(popOverSettings2)
.on("mouseenter", function() {
var _this = this;
$(this).popover("show");
$(".popover").on("mouseleave", function() {
$(_this).popover('hide');
});
}).on("mouseleave", function() {
var _this = this;
if (!$(".popover:hover").length) {
$('.popover').popover('hide');
}
});
});
button {
position: absolute;
top: 0%;
left: 0%;
}
.infoBar {
display: flex;
flex-direction: row;
position: absolute;
top: 30%;
max-width: 95%;
height: 160px;
margin: auto;
column-gap: 25px;
background-color: green;
overflow-x: auto;
}
.infoBar .imgWrap {
height: 100%;
cursor: pointer;
}
.infoBar .imgWrap img {
height: 100%;
cursor: pointer;
}
.infoBarPopoverContent {
display: none;
}
.popover .popover-body {
overflow-x: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<button onclick='appendImg()'>Click to append img</button>
<div class="infoBar" id="infoBar">
<div class="imgWrap"><img src="https://picsum.photos/200/300"></div>
<div class="imgWrap"><img src="https://picsum.photos/200/300"></div>
<div class="imgWrap"><img src="https://picsum.photos/200/300"></div>
<div class="imgWrap"><img src="https://picsum.photos/200/300"></div>
<div class="imgWrap"><img src="https://picsum.photos/200/300"></div>
</div>
<div class="infoBarPopoverContent"></div>
From what I have understood from your code is that you have to attach the event listener after the dynamic append like this
First wrap up the event listener inside the function, then call the function after the append
function appendImg() {
$('.infoBar').append('<div class="imgWrap"><img
src="https://source.unsplash.com/user/c_v_r/100x100"></div>')
addEvent();
}
var popOverSettings2 = {
selector: '.infoBar .imgWrap',
container: 'body',
html: true,
trigger: "manual",
placement: 'top',
sanitize: false,
animation: false,
content: function() {
setTimeout(() => {
$('.popover').css({
'width': '20%',
'height': '20%',
'overflow': 'auto'
})
})
$('.infoBarPopoverContent').append('<p>Popover stuff...</p>')
return $('.infoBarPopoverContent').html();
}
}
function addEvent(){
$(function() {
$('.infoBar .imgWrap').popover(popOverSettings2)
.on("mouseenter", function() {
var _this = this;
$(this).popover("show");
$(".popover").on("mouseleave", function() {
$(_this).popover('hide');
});
}).on("mouseleave", function() {
var _this = this;
if (!$(".popover:hover").length) {
$('.popover').popover('hide');
}
});
});
}
addEvent()
https://jsbin.com/rumabifiqo/edit?output
I am having some serious trouble understanding Fancybox. I suppose my initial question is that I am using Fancybox 3 and assume that it has all features of previous versions?
What I am trying to achieve is simply change the caption position to inside rather than the default. I have tried so many different JS options to get a titleposition: 'inside' and it changes absolutely nothing...
<!DOCTYPE HTML>
<head>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="fancybox/jquery.fancybox.js"></script>
</body>
<footer>
<section class="socialmedia">
<a class="sm" href="images/snapcode.png" data-fancybox data-caption="Snapchat"><img src="images/snapchat.png"></a>
</footer>
</html>
I am using the defaults
Of course, it is too late but maybe help someone.
Explanation: copy the caption and put it in the .fancybox-content element. And to the original set display: none. Position the caption bottom of picture using transform: translateY(100%). When initializing the slide, the fancybox box takes the height of the hidden title and sets the padding-bottom to the .fancybox-slide element. Thus, the title will not overlap the image or go beyond window borders.
JS (jquery):
$('[data-fancybox="gallery"]').fancybox({
beforeShow: function() {
$('.caption--image').remove();
},
afterShow: function() {
var caption = $(".fancybox-caption"),
innerCaption = caption.clone().addClass('caption--image');
$(".fancybox-slide--current .fancybox-content").append(innerCaption);
caption.not('.caption--image').addClass('caption--bottom');
}
});
CSS:
.fancybox-caption.caption--image {
width: 100%;
bottom: 0;
padding: 10px;
color: #fff;
transform: translateY(100%);
}
.fancybox-inner > .fancybox-caption {
display: none;
}
My solution:
CSS:
.fancybox-caption {
display: block;
margin-right: auto;
margin-left: auto;
padding: 0;
bottom: 13px;
text-align: right;
}
.fancybox-caption:before {
background: 0 0;
}
.fancybox-caption:after {
border-bottom: 0;
}
.fancybox-caption.none {
display: none;
}
.fancybox-caption>span {
background-color: #343434;
color: #B6B6B6;
display: inline-block;
padding: 5px 15px;
}
Jquery:
$('[data-fancybox="images"]').fancybox({
idleTime: false,
infobar: false,
beforeShow: function() {
$(".fancybox-caption").addClass('none');
},
afterShow: function() {
$(".fancybox-caption").wrapInner("<span/>");
var imageWidth = $(".fancybox-slide--current .fancybox-content").width();
$(".fancybox-caption").css("width", imageWidth);
setTimeout($(".fancybox-caption").removeClass('none'), 200);
}
});
This maybe can help you.
$('[data-fancybox]').fancybox({
protect: true,
afterShow: function() {
var imageWidth = $(".fancybox-slide--current .fancybox-image-wrap").width();
$(".fancybox-caption").css("width", imageWidth);
}
});
I have a website (test page here) using InstafeedJS and SimplyScroll - yet for the life of me I cannot figure out why the feed won't scroll.
I'm a novice so be nice!
<!DOCTYPE>
<html>
<head>
<title>Instafeed Test!</title>
<link rel="Stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/jquery.simplyscroll.css" media="all" type="text/css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.simplyscroll.js"></script>
<script type="text/javascript">
(function($) {
$(function() {
$("scroller").simplyScroll();
});
})(jQuery);
</script>
<script type="text/javascript" src="js/instafeed.min.js"></script>
<script type="text/javascript">
var feed = new Instafeed({
get: 'user',
userId: 'XXXXXXXX',
clientId: 'XXXXXXXXXXXXXXXX',
accessToken: 'XXXXXXXX.XXXXXX.XXXXXXXXXXXXXXXX',
resolution: 'thumbnail',
template: '<img src="{{image}}" />',
sortBy: 'most-recent',
limit: 12,
links: false
});
feed.run();
</script>
</head>
<body>
<div class="simply-scroll simply-scroll-container">
<div class="simply-scroll-clip">
<div id="instafeed" class="simply-scroll-list" style="width: 10000px;"></div>
</div>
</div>
</body>
</html>
I have pass this case as an issue to a thread of InstafeedJS.
There is stated that the case is really an issue with the scrolling library. One other thing - jquery.simplyscroll is no longer supported and hasn't been updated since 2012.
You'd be better off choosing a modern and supported carousel library. As suggested I found a way to make the scrolling works using another one called slick as shown in the picture.
To do it you will need 3 files from the source or simply fork it and use them like the followings:
HTML Head
<link href="slick/slick/slick.css" rel='stylesheet' type='text/css' media="screen" />
<link href="slick/slick/slick-theme.css" rel='stylesheet' type='text/css' media="screen" />
<script type="text/javascript" src="slick/slick/slick.min.js"></script>
HTML Body
<div class="container">
<div class="tweet_txt">
<div id="instafeed"></div>
</div>
<button type="button" id="load-more">Load More</button>
</div>
CSS
.tweet_txt {
width: 600px;
height: 100px;
overflow: hidden;
}
#instafeed {
width: 1200px;
display: block;
margin: 0;
padding: 0;
line-height: 0;
margin-top: 20px;
overflow: hidden;
}
#instafeed div {
float: left;
width: 50%;
display: inline-block;
margin: 0!important;
padding: 0!important;
}
#instafeed img {
height: 100px;
width: 100px;
}
#instafeed .insta-likes {
width: 100%;
height: 100%;
margin-top: -100%;
opacity: 0;
text-align: center;
letter-spacing: 1px;
background: rgba(255,255,255,0.4);
position: absolute;
text-shadow: 2px 2px 8px #fff;
font: normal 400 11px Playfair Display,sans-serif;
color: #0a0a0a;
line-height: normal;
}
JS
// grab out load more button
var loadButton = document.getElementById('load-more');
//var ulfeed = document.getElementById('instafeed');
//var scroll = new simplyScroll();
var feed = new Instafeed({
get: 'user',
limit: 11,
sortBy:'most-recent',
userId: YOUR ID,
resolution: 'standard_resolution',
accessToken: 'YOUR TOKEN',
template: '<div><img src="{{image}}" /><div class="insta-likes"><div style="display: table; vertical-align: middle; height: 100%; width: 100%;"><span style="vertical-align: middle; height: 100%; width: 100%;">{{likes}} <i class="fa fa-heart"></i><br/>{{comments}} <i class="fa fa-comment"></i></span></div></div></div>',
after: function() {
// run slick for scrolling
$('#instafeed').slick({
slidesToShow: 6,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
});
// every time we load more, run this function
if (!this.hasNext()) {
// disable button if no more results to load
loadButton.setAttribute('disabled', 'disabled');
}
},
success: function() {
//called when Instagram returns valid json data
},
});
// bind the load more button
loadButton.addEventListener('click', function() {
feed.next();
});
// run instafeed!
feed.run();
You may follow on how the result will look like by the code.
In the discussion there is the link to JSFiddle and also the place where it Lives.
I'm trying to find a way to delay the final part as stated in the title.
My initial JQuery code
var debounce = false;
var elements = document.getElementsByClassName('.Menu')
$('#Option1').click(function() {
if (debounce == true) {return;}
debounce = true;
$('.Menu').each(function(index) {
anim2($(this), index * 250, function() {
if (index != elements.length) {return;}
debounce = false;
})
})
});
This produces what I want to a certain extent but due to the delays and the fact that the display becomes none, I don't get what I truly want.
GIF Representing problem : https://gyazo.com/3d8f46ec3e34dfd7b88738fc00d477e1
The initial fade in works great but on the fade out when the first button disappears the delayed buttons for the other ones shift to the left which is what I'm trying not to let happen.
I tried doing:
var debounce = false;
var isClicked = false;
var elements = document.getElementsByClassName('.Menu')
$('#Option1').click(function() {
if (debounce == true) {return;}
debounce = true;
$('.Menu').each(function(index) {
anim2($(this), index * 250, function() {
if (index != elements.length) {
if (isClicked == false) {
isClicked = true;
$('.Menu').each(function(index) {
$(this).css("display", "none");
$(this).css("opacity", "0");
})
} else {
isClicked = false;
$(this).css("display", "inline-block");
$(this).css("opacity", "1");
}
}
debounce = false;
})
})
});
But it doesn't work and creates bugs. If you need to know the anim2 function it is
function anim2(object, dt, end) {
$(object).stop().delay(dt).fadeToggle({
duration: 1000,
easing: "easeOutQuad",
quene: true,
complete: end
})
}
Just going to post the relevant parts of the LESS in case it might be the cause of it
.invisible {
background: transparent;
border: none;
}
.Hamburger {
background: #pure-white;
width: 100%;
height: 5px;
opacity: 0;
position: absolute;
.rounded
}
#Option1 {
.invisible;
position: absolute;
padding: 0px 0px 0px 0px;
top: 0px;
left: 10px;
height: 100%;
width: 40px;
#TopSpan {
.Hamburger;
top: 10px;
}
#MiddleSpan {
.Hamburger;
top: 20px;
}
#BottomSpan {
.Hamburger;
top: 30px;
}
&:active {
background: #pure-red;
}
}
I have also checked out Delay of a few seconds before display:none and Hide div after a few seconds but delay() won't work since it's an automatic effect
HTML
<!DOCTYPE html>
<html lang="en">
<head class="Setup">
<link rel="stylesheet/less" type="text/css" href="../LESS/core.less"/>
<script src="../JavaScript/less.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type='text/javascript' src="../JavaScript/java.js"></script>
</head>
<body class="Setup">
<div class="Design">
<div class="TopDesign">
<span id="Topbar"></span>
<span id="Minibar">
<button class="Buttons" id="Option1">
<span class="Home" id="TopSpan"></span>
<span class="Home" id="MiddleSpan"></span>
<span class="Home" id="BottomSpan"></span>
</button>
<button class="Buttons Menu" id="Sub1">
<p class="SubText">Source1</p>
</button>
<button class="Buttons Menu" id="Sub2">
<p class="SubText">Source2</p>
</button>
<button class="Buttons Menu" id="Sub3">
<p class="SubText">Source3</p>
</button>
</span>
</div>
<div class="LeftDesign">
<span id="Leftbar">
<img src="" alt="">
</span>
</div>
</div>
</body>
</html>
Here is an answer not using javascript for the animation but CSS:
https://jsfiddle.net/7a1cpu0n/
I know this isn't exactly what you wanted, but it's simpler code and you should be able to apply the concept to your project. Just use CSS transition on the elements you want to show/hide and use javascript to toggle their class.
<ul>
<li>Menu</li>
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
$(document).ready(function(){
$('li:first-child').click(function(){
var time = 250;
$(this).siblings().each(function(){
var el = $(this);
setTimeout( function(){
el.toggleClass('show');
}, time);
time = time+250;
});
});
});
ul li:not(:first-child){
opacity: 0;
}
ul li {
float: left;
padding: 10px;
margin: 10px;
background: #e6e6e6;
list-style: none;
transition: all 1s;
}
ul li.show {
opacity: 1;
}
This is proof of concept.