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});
});
Related
So I have 2 div as shown in below code.
What I just want is to slide up the second div (box-2) from the top of the first div.
The real problem is
First div will remain as it is and second div will slide from it's back side.
I want to keep the second div hidden and let it slide and revel it self as it slides i.e. only the portion that slides up should be visible.
Not sure how to do it, tried multiple options but no luck.
Really appreciate if anyone can guide.
$('.box-2').animate({'margin-bottom': '83px'}, 3000);
.box-1 {
height: 30px;
width: 100px;
background-color: blue;
color: white;
position: fixed;
bottom: 0px;
}
.box-2 {
height: 30px;
width: 500px;
background-color: blue;
color: white;
position: fixed;
bottom: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="box-1">div 1</div>
<div class="box-2">div 2 - the one that will slide up from box-1's Top.</div>
The easiest way, considering your starting point, is to simply use the callback function exposed inside of the animate() method, which will be executed once the initial animation is completed:
// your initial jQuery, which selects the '.box-2' element(s) and
// passes that collection to the animate() method:
$('.box-2').animate({
// here rather than quote (just to show the example), we camel case
// the CSS 'margin-bottom' property to the (unquoted) 'marginBottom',
// and pass in the new dimension to which the method will animate:
marginBottom: '83px'
// we then take advantage of the completion callback, which is called
// when the first animation is complete:
}, 1500, function() {
// here we take the 'this' from the collection passed to the outer
// animate() call in which this callback function is wrapped:
$(this).animate({
// here we then animate the 'width' to its new dimension of
// '500px':
width: '500px'
}, 1500);
});
.box-1 {
height: 30px;
width: 100px;
background-color: blue;
color: white;
position: fixed;
bottom: 0px;
}
.box-2 {
height: 30px;
width: 100px;
background-color: blue;
color: white;
position: fixed;
bottom: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="box-2">Div that will slide up from box-1's Top.</div>
<div class="box-1">Static div</div>
Note that, because of the two animations running sequentially I divided your initial time of 3000ms to have each animation take 1500ms, so that the overall time taken is the same but allowing the animation to run in stages.
References:
animate().
I'm not quite sure I understand your question completely.
But if you want to reveal the box-2 from behind box-1, don't you just have to switch their positions in the html? So that box-1 is always in front of box-2
$('.box-2').animate({'margin-bottom': '83px'}, 3000);
.box-1 {
height: 30px;
width: 100px;
background-color: blue;
color: white;
position: fixed;
bottom: 0px;
}
.box-2 {
height: 30px;
width: 500px;
background-color: blue;
color: white;
position: fixed;
bottom: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="box-2">Div that will slide up from box-1's Top.</div>
<div class="box-1">Static div</div>
Use z-index:1; on css of .box-1
$('.box-2').animate({'margin-bottom': '83px'}, 3000);
.box-1 {
height: 30px;
width: 100px;
background-color: blue;
color: white;
position: fixed;
bottom: 0px;
z-index:1;
}
.box-2 {
height: 30px;
width: 500px;
background-color: blue;
color: white;
position: fixed;
bottom: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="box-1">div 1</div>
<div class="box-2">div 2 - the one that will slide up from box-1's Top.</div>
The $( ".box-2" ).hide(0); method is used to hide the second container after the animation. z-index: -1; style applied to make the box-2 container appear at the bottom during animation.
$(document).ready(function() {
/* The animation moves the second container from the bottom to a height of 83px. */
$('.box-2').animate({'margin-bottom': '83px'}, 3000, function(){
/* The first container appears when the animation is finished. */
$( ".box-1" ).css("display", "inline");
/* The second container is stored after the animation. */
$( ".box-2" ).hide(0);
});
});
.box-1 {
height: 30px;
width: 100px;
background-color: red;
color: white;
position: fixed;
bottom: 0px;
/* The first container is initially hidden. */
display: none;
}
.box-2 {
height: 30px;
width: 500px;
background-color: blue;
color: white;
position: absolute;
bottom: 0px;
/* Implemented to make the container appear at the bottom during animation. */
z-index: -1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="box-1">Static div</div>
<div class="box-2">Div that will slide up from box-1's Top.</div>
References
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
I'm wanting to create basically a full page background image that, once the user clicks (anywhere), scrolls down to the remaining content and then hides itself. Initially, there would be no scrollbar, then once the click>scrolltop has taken place, and the background div hidden, the scrollbar appears by removing the overflow-hidden class.
My problem is that when I use the scrolltop by itself, the page does scroll directly to the element I've selected, but when I then add in the javascript code to hide the initial introduction div (on which the user clicks), the page jumps down far past the ScrollTop point.
I've included my JSFiddle link here, if anyone has any thoughts.
display: none is changing the height of .intro to 0, so you have two options:
Change the CSS for .hidden to use visibility: hidden
or
Change the first parameter of .animate to take into account the height of .intro: $(".one").offset().top - $(".intro").height()
I'd also suggest putting the removeClass and addClass calls in a callback function, rather than using .delay():
Example with option 2 + callback usage:
$(document).ready(function() {
$(".intro").click(function() {
$('html, body').animate({
scrollTop: $(".one").offset().top - $(".intro").height()
}, 700, function() {
$("body").removeClass("bleh");
$(".intro").addClass("hidden");
});
});
});
Is this helpful? After adding the hidden class you can scroll to the top of the one div.
$(function(){
$(".intro").on("click", function(){
$("body").removeClass("bleh");
$("html, body").animate({
scrollTop : $(".one").offset().top
}, function(){
$(".intro").addClass("hidden")
$(document).scrollTop(0)
})
})
})
html, body{
height: 100%;
}
body{
margin: 0;
}
.bleh{
overflow: hidden;
}
.hidden{
display: none;
}
.intro{
background: red;
text-align: center;
padding: 20px;
background-position: center;
background-size: cover;
height: 100%;
}
.one {
width: 100%;
background-color: black;
display: block;
height: 400px;
}
.two {
width: 100%;
background-color: blue;
display: block;
height: 400px;
}
.three {
width: 100%;
background-color: black;
display: block;
height: 400px;
}
.four {
width: 100%;
background-color: blue;
display: block;
height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<body class="bleh">
<div class="intro">
<h1>Click anywhere to scroll down to main content</h1>
</div>
<div class="one">
</div>
<div class="two">
</div>
<div class="three">
</div>
<div class="four">
</div>
</body>
I have this code:
$('button').click(function(){
$('.slide').animate({
width: "450px";
display: block;
});
});
.slide {
width: 0px;
height: 450px;
background-color: blue;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide"></div>
<button>Slide the div</button>
When I click on the button I want .slide to appear to the left like a slide.
I already put my width div at width: 0px. Then in jQuery this div would get width: 450px.
You had some syntax errors within the animate the ; should be a , and the button had no class so the click event was never executed. Also, you can't animate the display property.
Here's the updated snippet:
$('.open-menu').click(function(){
$('.slide').animate({
width: "450"
});
});
.slide {
width: 0px;
height: 450px;
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide"></div>
<button class="open-menu">Slide the div</button>
There are a few issues with your code:
Animate won't take care of the display property.
Click handler setup should be wrapped in the jQuery ready function.
Button needs the class open-menu.
Object properties in animate argument shouldn't end with semicolons.
See below for a working example.
$(function () {
$('.open-menu').click(function(){
$('.slide').animate({
width: "450px"
});
});
});
.slide {
width: 0px;
height: 450px;
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="open-menu">Slide the div</button>
<div class="slide"></div>
I have been having a problem centering a fixed div in IE and Chrome when using the JQuery draggable function with a 'containment'. It seems whenever I try to drag the element, it snaps to the left of the containing element until I let go of it and then start dragging again.
Here's an example:
CodePen
http://codepen.io/anon/pen/NqZjbX
HTML
<div class="draggable">
</div>
.CSS
.draggable {
background: salmon;
width: 50px;
height: 50px;
margin: 0 auto;
position: fixed;
left: 0;
right: 0;
cursor: move;
}
body {
height: 500px;
}
JS:
$(function() {
$(".draggable").draggable({
containment: 'body'
});
});
Thanks for your help!
The implementation of .draggable() is not intended to be used with two properties of the same axis(left and right in your case). You have to use some other technique to center the element.
Please see example below:
$(function() {
$(".draggable").draggable({
containment: 'body'
});
});
.draggable {
background: salmon;
width: 50px;
height: 50px;
position: fixed;
cursor: move;
/* Initial position */
top: 0;
left: 50%;
margin-left: -25px;
}
body {
height: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<div class="draggable">
</div>
I'm trying to use jQuery to animate a div with a background picture decreasing in width from left to right whilst being absolutely positioned.
I need to make this compatible with IE8 hence using jQuery.
Here is a basic JSFiddle demo link with what I have so far, but it animates from right to left:
JSFiddle link
jQuery(document).ready(function($){
$(document).on('click', '.splat', function(e){
$(this).animate({width:"0px"},800);
});
});
.splat {
width: 400px;
height: 400px;
background: blue;
position: absolute;
top: 100px;
left: 100px;
}
<div class="splat"><!-- --></div>
I need it going in a different direction, like the following image:
Hoping someone could point me in the right direction (no pun intended!). Thanks in advance.
You may use a wrapper and position the child div with right:0.
See this demo
If i can understand your question, solution is replace left with right :)
http://jsfiddle.net/V4XCb/6/
.splat {
width: 400px;
height: 400px;
background: blue;
position: absolute;
top: 100px;
right: 100px;
}
You can like this:
<div class="box">
<div class="splat"></div>
</div>
.box{
width:200px;
height: 200px;
}
.splat {
height: 200px;
width: 100%;
background: blue;
float: right;
}
If you could wrap your elem with a wrapper which is relative positioned element and do the following:
.splatWrapper {
width: 400px;
height: 400px;
background: green;
position: relative; //<-----needed
top: 100px; //<------------needed
left: 100px; //<------------needed
}
.splat{
width: 400px;
height: 400px;
background: blue;
position: absolute;
top: 0; //<----------needed
right: 0; //<----------needed
}
Try this fiddle
You can use Scale Effect in Jquery :
jQuery(document).ready(function($){
$(document).on('click', '.splat1', function(e){
$(this).hide("scale");
});
});
Fiddle : http://jsfiddle.net/V4XCb/14/