i have this stack of divs that changes z-index on click. When a new div gets the highest z-index being placed on top i want to animate the height of it. from 0 to 100p, so it looks like it "grows".
Anyone that can help on this?
jsFiddle: http://jsfiddle.net/nfp17etg/2/
<div class="holder">
<div class="one current">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
<button>click</button>
body {
margin:0;
padding:0;
}
.holder {
width: 100px;
height:100px;
border:1px solid #000000;
position: relative;
}
.holder div {
width: 100px;
height: 100px;
position:absolute;
top:0;
left:0;
z-index:0;
}
.holder div.current{
z-index:1;
}
.one {
background:red;
}
.two {
background:green;
}
.three {
background: blue;
}
$("button").click(function(){
if ($(".holder >div:last-child").hasClass("current")) {
$(".holder >div:last-child").removeClass("current");
$(".holder >div:first-child").addClass("current");
}
else {
$(".current").removeClass("current").next().addClass("current");
}
});
Try this one
$(document).ready(function(){
$("button").click(function(){
var div = $("div");
div.animate({height: '300px', opacity: '0.4'}, "slow");
div.animate({width: '300px', opacity: '0.8'}, "slow");
div.animate({height: '100px', opacity: '0.4'}, "slow");
div.animate({width: '100px', opacity: '0.8'}, "slow");
});
});
check jsFiddle demo:
Related
I have a CSS class that has left-margin: 150px and I just want to function it in an animated way.
ToggleClass in jQuery works but without any animation.
$(this).toggleClass("active", 1000, "easeInOutQuad");
I managed to do it animated using addClass and removeClass. But I am wondering if there is any easier way to do it. it takes 10 lines of code while there should be something much more efficient.
Any ideas?
$(".box").on('click tap', function() {
if($(this).hasClass('active')){
$(this).animate({
marginLeft: "-=150px",
}, 500, function() {
$(this).removeClass('active');
});
}else{
$(this).animate({
marginLeft: "+=150px",
}, 500, function() {
$(this).addClass('active');
});
}
});
// $(this).toggleClass("active", 1000, "easeInOutQuad");
.box{
width: 100px;
height: 100px;
background-color: red;
}
.active{
margin-left: 150px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box"> BOX </div>
I'd use CSS transition to do it. Add transition: margin-left 0.5s; (or similar) to your .box style rules:
$(".box").on('click tap', function() {
$(this).toggleClass('active');
});
.box {
width: 100px;
height: 100px;
background-color: red;
transition: margin-left 0.5s; /* <== */
}
.active {
margin-left: 150px;
}
<div class="box"> BOX </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Right now when I add .appendTo(".wrapper") like in the below code it takes away the animation effect. In the final result I would like it so that when the div at the most left side slides out of view (overflow hidden effect) it should be removed but added to the end of the slide so there could be continues slide show effect.repeating the prior divs.
$(document).ready( function(){
var x = 0;
$(".next").on("click", function(){
x -= 245;
// $(".wrapper").css({"marginLeft" : x +"px"}).delay(3000).queue(function(next){
// $(this).css({"marginLeft" : 0})
// $(".element").eq(0).appendTo(".wrapper")
// next();
// })
console.log($(".element").length)
$(".element").each(function(i, e){
console.log(i)
$(this).eq(i).css({"marginLeft" : x +"px"}).appendTo(".wrapper");
})
// $(".element").eq(0).css({"marginLeft" : x +"px"}).appendTo(".wrapper")
})
});
css:
.mgcont{
margin:5% auto;
width:970px;
overflow: hidden;
border: 2px solid gray;
}
.wrapper{
/*overflow: hidden;*/
white-space: nowrap;
width:960px;
}
.element{
width: 240px;
height: 300px;
background: tomato;
display: inline-block;
margin-left: 10px;
transition: margin 3s;
}
.prev{
float: right;
}
html:
<div class="mgcont">
<button class="next">next</button>
<button class="prev">PREV</button>
<div class="wrapper">
<div class="element">1</div>
<div class="element">2</div>
<div class="element">3</div>
<div class="element">4</div>
<div class="element">5</div>
<div class="element">6</div>
</div>
</div>
FIDDLE
You have to modify your javascript like this
$(document).ready( function(){
$(".next").on("click", function(){
console.log($(".element").length)
$(".element").each(function(i, e){
console.log(i)
})
$(".element").eq(0).css({"margin-left" : "-245px"}).delay(3000).queue(function(next){
$(this).appendTo(".wrapper").css({"margin-left":"10px"});
$( this ).dequeue();
});
});
});
Also modify css for transition property as
.element{
width: 240px;
height: 300px;
background: tomato;
display: inline-block;
margin-left: 10px;
transition: margin-left 3s;
}
This will work perfectly
Updated Fiddle
If you want to achieve it with a separate css class, you have to do like this
$(document).ready( function(){
$(".next").on("click", function(){
console.log($(".element").length)
$(".element").each(function(i, e){
console.log(i)
})
$(".element").eq(0).addClass('translateleft').delay(3000).queue(function(next){$(this).appendTo(".wrapper").removeClass('translateleft');
$( this ).dequeue();
});
});
});
and in your css define styles for class translateleft like this
.translateleft{
animation: translateleft 3s;
-webkit-animation:translateleft 3s;
-moz-animation:translateleft 3s;
-o-animation:translateleft 3s;
}
#keyframes translateleft{
from{margin-left:0px;}
to{margin-left:-245px;}
}
#-webkit-keyframes translateleft{
from{margin-left:0px;}
to{margin-left:-245px;}
}
#-moz-keyframes translateleft{
from{margin-left:0px;}
to{margin-left:-245px;}
}
#-o-keyframes translateleft{
from{margin-left:0px;}
to{margin-left:-245px;}
}
To see working example See Fiddle
UPDATE
.dequeue() statement was missing from the function .
Now the answer has been updated and works perfectly for repetitions
I modified all files, just try the below snippets,
$(function(){
var width = $('.element:first').width();
$(".next").on("click", function(){
var neww = $(".element:first").clone();
$('.element').eq(1).css({'margin-left':'-'+width+'px'});
$(".element:first").remove();
neww.appendTo('.wrapper');
$('.element:last').css({'margin-left':'5px'});
});
$(".prev").on("click", function(){
var neww = $('.element:last').clone();
$(".element:last").remove();
$('.element:first').css({'margin-left':'5px'});
neww.prependTo('.wrapper');
$('.element:first').css({'margin-left':'-'+width+'px'});
});
});
.mgcont{
margin:5% auto;
width:970px;
overflow: hidden;
border: 2px solid gray;
}
.wrapper{
/*overflow: hidden;*/
white-space: nowrap;
width:960px;
}
.element:first-child{
margin-left: -240px;
}
.element{
width: 240px;
height: 300px;
background: tomato;
display: inline-block;
margin-left: 5px;
transition: all 3s;
}
.prev{
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="mgcont">
<button class="next">next</button>
<button class="prev">PREV</button>
<div class="wrapper">
<div class="element">6</div>
<div class="element">1</div>
<div class="element">2</div>
<div class="element">3</div>
<div class="element">4</div>
<div class="element">5</div>
</div>
</div>
I hope this will work as you excepted,
Working DEMO
Why is it that even though I have this animation's duration set to 2 seconds, shrinking the window results in there being a greater delay at first, and a faster animation?
See Bootply.
JS:
function animateit() {
$('.wrapper .water').animate({
'height': '350px',
'top': 0
}, 2000, function () {
$('.wrapper .water').animate({
'height': 0,
'top': '350px'
}, 2000, animateit);
});
}
animateit();
CSS:
.wrapper {
position: relative;
height:auto;
width: 100%;
max-width: 350px;
overflow:hidden;
}
.img-responsive {
display: block;
width: 100% \9;
max-width: 100%;
height: auto;
}
.glass {
position:absolute;
left:0px;
top:0px;
z-index:5;
}
.hide-image {
display: block;
opacity: 0;
width: 100%;
}
.water {
position:absolute;
left:0px;
right: 0;
top:350px;
background-color:#67d9ff;
height:0px;
display:block;
}
HTML:
<div class="wrapper">
<img class="hide-image" src="http://www.videsignz.com/testing/images/water-front2.png">
<img class="glass img-responsive" src="http://www.videsignz.com/testing/images/water-front2.png">
<div class="water"></div>
</div>
I noticed that for the second part of the animation's JS, changing 'top': '350px' to 'top': '100%' caused the it's duration to be relatively consistent regardless of window size, but applying that code to the filling of the glass doesn't yield the same result - and it also alters the animation in normal view nonetheless.
I want to know how to turn my two arrow buttons into scrolling buttons so you can scroll through the div container. IF you look at the demo below you will notice a window appears when you press the black square. One the window opens there are to black rectangle which indicate my scrolling buttons the the gray squares are the contents. I would like to remove the scroll bar but still have scrolling function which I can control with the two black rectangle buttons i made. I would also like the bottom black rectangle to be where the horizontal scroll bar is normally at and I would not like that button to fall into the scroll because that would void the whole purpose.
I would also like top button to disappear when the container is all the way at the top and the bottom button to disappear when the container is all the way at the bottom.
There is a website that I got this idea from so you can go look at it to see what I am talking about. It will be listed below! If you click the little map button on the left another window will open up with circle icons! You may have to shrink your browser for the scroll feature to appear but you will notice a button at the bottom which scrolls down and once you go all the way down it disappear and once you scroll down the up button appears to scroll up then goes away when you get to the top again.
Here is the example website! http://intothearctic.gp/en/
Here is some code!
HTML
<div id="sidemenu">
<div id="regionsContainer">
<div id="regionsUnitedStates" class="not-open regionsButton">
<div id="regionsUnitedStatesTooltip"></div>
</div>
</div>
<div id="regionsUnitedStatesChooseState" class="regionsContent">
<div id="chooseStateUnitedStatesColumnOne">
<div id="chooseStateUnitedStatesScrollUp"></div>
<div id="chooseStateAlabama1" class="not-open regionsButton"></div>
<div id="chooseStateAlabama2" class="not-open regionsButton"></div>
<div id="chooseStateAlabama3" class="not-open regionsButton"></div>
<div id="chooseStateAlabama4" class="not-open regionsButton"></div>
<div id="chooseStateAlabama5" class="not-open regionsButton"></div>
<div id="chooseStateAlabama6" class="not-open regionsButton"></div>
<div id="chooseStateAlabama7" class="not-open regionsButton"></div>
<div id="chooseStateUnitedStatesScrollDown"></div>
</div>
</div>
</div>
CSS
#sidemenu {
width: 60px;
height:100%;
min-width: 60px;
max-width: 60px;
background-color: #383D3F;
position: absolute;
left: -60px;
transition: left ease-in-out 0.5s;
top: 0;
}
#sidemenu.show {
left: 0;
}
#regionsContainer {
width: 60px;
height: 100%;
min-width: 60px;
max-width: 60px;
background-color: #383D3F;
position: absolute;
top:25%;
}
#regionsUnitedStates {
width: 60px;
height: 60px;
background-color:#111111;
}
#regionsUnitedStatesTooltip {
opacity:0;
background-color:#000;
height:60px;
width:180px;
left:100px;
position:absolute;
transition:all ease-in-out 0.25s;
top:0;
visibility:hidden;
}
#regionsUnitedStates.not-open:hover #regionsUnitedStatesTooltip{
left: 60px;
opacity:1;
visibility:visible;
}
#regionsUnitedStates:hover {
background-position:bottom;
}
#regionsUnitedStatesChooseState{
position:absolute;
transition:all ease-in-out 0.25s;
left: -150px;
width: 150px;
height: 100%;
background: #505759;
top:0;
z-index:-1;
overflow:auto;
}
#regionsUnitedStatesChooseState.show {
left: 60px;
z-index:-1;
}
#chooseStateUnitedStatesScrollUp {
width:150px;
height:40px;
background-color:#111111;
top:0%;
}
#chooseStateUnitedStatesScrollUp:hover {
background-position:bottom;
cursor:pointer;
}
#chooseStateUnitedStatesScrollDown {
width:150px;
height:40px;
background-color:#111111;
bottom:100%;
}
#chooseStateUnitedStatesScrollDown:hover {
background-position:bottom;
cursor:pointer;
}
#chooseStateUnitedStatesColumnOne {
width:100px;
height:100%;
float:left;
top:0%;
}
#chooseStateAlabama1 {
width: 100px;
height:100px;
background-color:#888888;
margin-left:25px;
margin-top:10px;
}
#chooseStateAlabama2 {
width: 100px;
height:100px;
background-color:#888888;
margin-left:25px;
margin-top:10px;
}
#chooseStateAlabama3 {
width: 100px;
height:100px;
background-color:#888888;
margin-left:25px;
margin-top:10px;
}
#chooseStateAlabama4 {
width: 100px;
height:100px;
background-color:#888888;
margin-left:25px;
margin-top:10px;
}
#chooseStateAlabama5 {
width: 100px;
height:100px;
background-color:#888888;
margin-left:25px;
margin-top:10px;
}
#chooseStateAlabama6 {
width: 100px;
height:100px;
background-color:#888888;
margin-left:25px;
margin-top:10px;
margin-bottom:10px;
}
JAVASCRIPT
$(function(slideSidemenu) {
setTimeout(function() { $("#sidemenu").addClass("show") }, 500);
});
var $regionsContent = $('.regionsContent'),
$regionsButton = $('.regionsButton').click(function(){
var $button = $(this).removeClass('not-open');
var buttonIndex = $regionsButton.index($button);
$regionsContent.removeClass('show');
setTimeout(function() {
$regionsContent.eq(buttonIndex).addClass('show');
}, 150);
$regionsButton.not($button).addClass('not-open');
});
$('#chooseStateAlabama').click(function() {
$(this).parents('.regionsContent').removeClass('show');
setTimeout(function() {
$("#regionsUnitedStatesAlabamaChooseCity").addClass('show');
}, 300);
});
$('#chooseStateAlaska').click(function() {
$(this).parents('.regionsContent').removeClass('show');
setTimeout(function() {
$("#regionsUnitedStatesAlaskaChooseCity").addClass('show');
}, 300);
});
DEMO
JSFIDDLE
This doesn't make the scrollbars disappear, nor does it hide buttons other than the example button scrolling out of view when moving down to paragraph four (so this isn't everything you need), but for a basic "click a div to scroll with jQuery" example, using code from this answer:
window.onload = init;
function init() {
$("#myButton").click(function() {
$('html, body').animate({
scrollTop: $("#foo4").offset().top
}, 2000);
});
}
Working example.
This is a bit of a challenge. Here's what I'm looking for:
3 divs on screen
Div 1 resides in the middle of the page (centered)
Div 2 resides just off the screen on the far left
Div 3 resides just off the screen on the far right
OnClick, Div 1 slides to the position Div 2 was (to the left), Div 2 slides off the screen entirely, Div 3 slides to where Div 3 was (middle, centered). A new div arrives on the right.
I've tried using jQuery animation and AddClass. jQuery doesn't like sliding a div offscreen.
Any thoughts?
For an example of what I'm describing, visit Groupon.com. I thought it was a cool idea, and have given myself the challenge of recreating it. So far, no dice.
-D
Something like this?
http://jsfiddle.net/jtbowden/ykbgT/embedded/result/
http://jsfiddle.net/jtbowden/ykbgT/
This is the basic functionality. It doesn't scale to more divs, etc, but that should get you started.
The key is to wrap your elements in a container and make the overflow hidden.
Update:
Here's a slightly better version that handles any number of divs (greater than 1):
http://jsfiddle.net/jtbowden/ykbgT/1/
Simplified further:
http://jsfiddle.net/jtbowden/ykbgT/2/
Code snippet:
$('.box').click(function() {
$(this).animate({
left: '-50%'
}, 500, function() {
$(this).css('left', '150%');
$(this).appendTo('#container');
});
$(this).next().animate({
left: '50%'
}, 500);
});
body {
padding: 0px;
}
#container {
position: absolute;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
.box {
position: absolute;
width: 50%;
height: 300px;
line-height: 300px;
font-size: 50px;
text-align: center;
border: 2px solid black;
left: 150%;
top: 100px;
margin-left: -25%;
}
#box1 {
background-color: green;
left: 50%;
}
#box2 {
background-color: yellow;
}
#box3 {
background-color: red;
}
#box4 {
background-color: orange;
}
#box5 {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="box1" class="box">Div #1</div>
<div id="box2" class="box">Div #2</div>
<div id="box3" class="box">Div #3</div>
<div id="box4" class="box">Div #4</div>
<div id="box5" class="box">Div #5</div>
</div>
Maybe I misinterpreted. I though you wanted three divs in a row, and only the ones on the end sliding and whatnot.
http://jsfiddle.net/acsfy/
(I know you're using jQuery for this, but it pissed me off as I was trying to force it to work. You'd have to adapt this for your purposes.)
Extending Jeff B answer, i've included Hammer.js and made a circular list.
$(function() {
$("#esq").click(function() {
console.log("Esquerda !");
var obj = $(".ativo");
$(obj).animate({
left: '-50%'
}, 500, function() {
$(this).css('left', '+150%');
$(this).appendTo('#container');
});
$(obj).next().animate({
left: '+50%'
}, 500, function() {
$(this).addClass('ativo');
$(obj).removeClass('ativo');
});
});
$("#dir").click(function() {
console.log("Direita !");
var obj = $(".ativo");
var prox = $(obj).siblings(":last");
$(obj).animate({
left: '+150%'
}, 500, function() {
$(prox).prependTo('#container');
});
$(prox).css('left', '-50%');
$(prox).animate({
left: '+50%'
}, 500, function() {
$(this).addClass('ativo');
$(obj).removeClass('ativo');
});
});
var hammertime = new Hammer(document.getElementById("container"));
hammertime.get('swipe').set({direction: Hammer.DIRECTION_HORIZONTAL});
hammertime.on('swipeleft', function() {
$("#esq").trigger("click");
});
hammertime.on('swiperight', function() {
$("#dir").trigger("click");
});
});
Example in: http://jsfiddle.net/tvLt1r9h/2/
And... not a year too late. If you want it to start on the first div, your css needs to look like this.
#box1 { background-color:#333; }
#box2 { background-color:#333; left: -50%; }
#box3 { background-color:#333; left: 150%; }
#box4 { background-color:#333; left: 150%; }
#box5 { background-color:#333; left: 150%; }