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>
Related
I'm trying to set border radius for an element with animation like this:
$(element).hover(function(){
$(this).animate({borderRadius : 5});
}, function(){
$(this).animate({borderRadius : 0});
});
when I hover on element, the animation will work Properly. But after hovering out, it won't perform with any animation.
In Firefox the animation isn't working on mouseout. Use CSS instead of javascript here.
Ex: https://codepen.io/patdiola/pen/ZyaYdE
button {
background: blue;
border: 0;
color: white;
padding: 10px 20px;
transition: border-radius ease-in-out 500ms;
}
button:hover {
border-radius: 10px;
}
Another solution is to use jQuery-UI:
$(function() {
$('#target').hover(function(){
$(this).addClass('borderIn', 500);
}, function(){
$(this).removeClass('borderIn', 500);
});
});
#target {
width: 100px;
height: 100px;
background-color: lightblue;
}
.borderIn {
border-radius: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="target"></div>
I exaggerated your code a little for effect, but it appears to work for me.
$("div").hover(function(){
$(this).animate({borderRadius : 30});
}, function(){
$(this).animate({borderRadius : 0});
});
div{
height: 70px;
border: 3px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
I am trying to animate an opening sequence for a project and am wondering how I can use .animate() to make my div "come in" from the right instead of the left which seems to be the default.
I am sure it is a simple solution, here is my code and fiddle:
JSFiddle
$("#clickMe").click(function() {
$(".login").animate({width: '0'});
}, function() {
$(".login").animate({width: '100'});
});
Thanks!
You could set a margin-left with a value equivalent to the element's width and animate it at the same time. In doing so, the width animation is essentially displaced by the margin.
$("#clickMe").click(function() {
$(".login").animate({
'width': '100',
'margin-left': '0'
});
});
.login {
height: 100px;
width: 0px;
background-color: #f00;
margin-left: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="clickMe">
Click To Change Size
</button>
<div class="login"></div>
Alternatively, another approach would be to float the element to the right inside of a parent element with the same dimensions:
$("#clickMe").click(function() {
$(".login").animate({width: '100%'});
});
.animation-wrapper {
width: 100px;
height: 100px;
}
.login {
height: 100%;
width: 0;
background-color: #f00;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="clickMe">
Click To Change Size
</button>
<div class="animation-wrapper">
<div class="login"></div>
</div>
Similarly, you could also just animate the left property and hide the overflow:
$("#clickMe").click(function() {
$(".login").animate({'left': '0'});
});
.animation-wrapper {
position: relative;
height: 100px;
width: 100px;
overflow: hidden;
}
.login {
height: 100%;
width: 100%;
background-color: #f00;
position: absolute;
left: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="clickMe">
Click To Change Size
</button>
<div class="animation-wrapper">
<div class="login"></div>
</div>
its a simple solution but should be enough for simple cases:
Wrap your login with container with exact width and height:
<div class="wrap">
<div class="login"></div>
</div>
Than apply styles:
.login {margin-left: 100px; height: 100px; width: 100px; background-color: red;}
.wrap{
width: 100px;
height: 100px;
overflow: hidden;
}
You move your .login to the right side of the .wrap (using margin-left:100px;) and add overflow:hidden to .wrap (.login will be not visibile)
than simply reset margin-left to 0 :
$("#clickMe").click(function() {
$(".login").animate({marginLeft: 0});
});
So I made this animated sidebar:
HTML
<div class="sidebar">
<div class="block"><a class="link" href="#link1">Menu Option 1</</div>
<div class="block">Menu Option 2</div>
<div class="block">Menu Option 3</div>
<div class="block">Menu Option 4</div>
</div>
CSS
.sidebar{
position:fixed;
height:100%;
width:200px;
top:0;
left:0;
z-index: 100;
}
.block{
width:5%;
height: 20px;
border-style: solid;
border-width: 1px;
text-indent: 100%;
text-align: right;
white-space: nowrap;
overflow: hidden;
background-color: red;
padding: 10px;
}
.link{
text-indent: 100%;
text-align: right;
white-space: nowrap;
width:100%;
height: 100%;
}
#slider {
border:1.5px solid black;
width:10px;
position:fixed;
}
jQuery
//Sidbar Animations
$(".block").mouseover(function() {
$(this)
.animate({
width: "90%"
}, {
queue: false,
duration: 400
}).css("text-indent", "0");
});
$(".block").mouseout(function() {
$(this)
.animate({
width: "5%"
}, {
queue: false,
duration: 500
}).css("text-indent", "100%");
});
And It kinda works, but not exactly as expected.
So If I add link inside the div, it still gets animated, but sometimes animation breaks and div collapses, and it's getting hard to actually click the link.
JSFiddle: http://jsfiddle.net/znxygpdw/
How can I prevent this?
In this case is better to use hover function:
//Sidbar Animations
$(".block").hover(function() {
$(this)
.animate({
width: "90%"
}, {
queue: false,
duration: 400
}).css("text-indent", "0");
}, function() {
$(this)
.animate({
width: "5%"
}, {
queue: false,
duration: 500
}).css("text-indent", "100%");
});
FIDDLE: https://jsfiddle.net/lmgonzalves/znxygpdw/1/
As mentioned above it would be better to use the hover function. However you problem lies with the mouseout function, when you hover over the link with the block the event is fired. To fix this, use the mouseleave function instead.
//Sidbar Animations
$(".block").mouseover(function() {
$(this)
.animate({
width: "90%"
}, {
queue: false,
duration: 400
}).css("text-indent", "0");
});
$(".block").mouseleave(function() {
$(this)
.animate({
width: "5%"
}, {
queue: false,
duration: 500
}).css("text-indent", "100%");
});
http://jsfiddle.net/znxygpdw/4/
So I have three DIV's in a container, like so:
<div class="container">
<div class="left">left</div>
<div class="center">click me</div>
<div class="right">right</div>
<div class="spacer"></div>
</div>
body {
padding: 0;
margin: 0;
overflow: hidden;
}
.container {
width: 100%;
height: 100%;
position: relative;
display: flex;
}
.left, .center, .right {
position: relative;
border: 1px solid black;
float: left;
padding: 10px;
}
.left, .right {
width: 25%;
}
.center {
width: 50%;
}
.right {
right: -999px;
transition: right 0.5s ease-out;
}
.left {
left: -999px;
transition: right 0.5s ease-out;
}
.spacer {
clear: both;
}
I've already coded it so that when you click on the .center DIV, the two sidebars (.left & .right) DIV's move into place. I used this code:
$('.center').click(function(){
$('.right').animate({"right": "0"});
$('.left').animate({"left": "0"});
}
});
What I want to do is write it so that AFTER they move into place, I can click on the .center DIV again and they'll move out like a sidebar does. My idea is to use an if/else checker so that it knows what state the DIV's are in.
I'm fairly new to Javascript and reading the if/else samples on Google only gets me more confused.
Any help? Thanks!
You may be able to rely on the animate complete property...
http://api.jquery.com/animate/
EDIT: I've updated to match your code...
$( ".center" ).click(function() {
$( ".right" ).animate({"right": "0"}, 5000, function() {
// Place the code you want to perform once animation is complete here.
});
});
You have a few options here - you could set a flag in the animation complete block for instance...
var complete = false;
$( ".center" ).click(function() {
$( ".right" ).animate({"right": "0"}, 5000, function() {
complete = true;
});
});
EDIT based on on comments...
$('.center').click(function(){
$('.right').animate({"right": "100px"});
$('.left').animate({"left": "100px"});
});
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%; }