We Keep Coding

How do I move an element diagonally and after another animation in jQuery?

I have an HTML/CSS element:
<div id="box">
<p> BOX </p>
</div>
#box {
width: 100px;
height: 200px;
background-color: skyblue;
position: absolute;
left: 0px;
top: 200px;
text-align: center;
font-family: Times New Roman;
}
I need it to move from its position in the middle of the page diagonally down and to the left (to the left corner). I've tried this:
$(function() {
$("button").click(function() {
$("#box").animate({
left: $(window).width() - 200
bottom: $(window).width() - 200
}
});
});
How do I do this with jQuery and have it done after it's been on the page a few seconds (for a different animation to occur first)?

Consider the following.
$(function() {
$("button").click(function() {
$("#box").animate({
left: $(window).width() - 100,
top: $(window).height() - 200
});
});
});
#box {
width: 100px;
height: 200px;
background-color: skyblue;
position: absolute;
left: 0px;
top: 40px;
text-align: center;
font-family: Times New Roman;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="box">
<p>BOX</p>
</div>
<button>Go</button>
You were using width property for both. You must use width and height. Also it's better to use top versus bottom in this case. You can use bottom, yet I would suggest something like:
bottom: $("#box").height()
In this way, the property of the top will be N Pixels from the "Bottom".
See More: https://www.w3schools.com/cssref/pr_pos_bottom.asp

Slide up div from another divs top when page loads

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

Need to get an a sliding div to stay in the same place on page (JSFiddle included)

I know this is a solved problem, but I'm having difficulty getting this to work so I need some help.
I have the following setup: http://jsfiddle.net/yHPTv/3656/
The issue is, users will scroll past that slider. I need the slider to stay in the same place on the page.
I've tried using the classes approach (have a class called sticky with position: fixed;) but it didn't work for me unfortunately.
Any help would be appreciated.
JS from JSFiddle:
$(function () {
$("#slideout").click(function () {
if($(this).hasClass("popped")){
$(this).animate({left:'-280px'}, {queue: false, duration: 200}).removeClass("popped");
} else {
$(this).animate({left: "20px" }, {queue: false, duration: 200}).addClass("popped")
}
});
$("#slideout").delay(500).animate({left: "20px" }, {queue: true, duration: 200}).addClass("popped");
});
CSS from JSFiddle:
body {
overflow-x: hidden;
}
#slideout {
background: #666;
position: absolute;
width: 280px;
height: 80px;
top: 45%;
left: -280px;
padding-right: 20px
}
#clickme {
position: absolute;
top: 0;
right: 0;
height: 20px;
width: 20px;
background: #ff0000;
}
#slidecontent {
float: right;
}
.stick {
position: fixed;
top: 0px;
}

Your current position is set to absolute when it should be fixed.
You tried this?
#slideout {position:fixed;}
and it works fine for me here: JS FIDDLE

jQuery/CSS animate div width from left to right

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/

jQuery Help - Appear underneath rather than on top

I have the following jQuery which I need adapting:
$(document).ready(function(){
$(".rss-popup a").hover(function() {
$(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "-70"}, "fast");
});
});
CSS:
.rss-popup {
margin: 100px auto;
padding: 0;
width: 100px;
position: relative;
}
div.rss-popup em {
background: url(../images/rssbuttonbubble.png) no-repeat;
width: 100px;
height: 49px;
position: absolute;
top: -70px;
left: -0px;
text-align: center;
text-indent: -9999px;
z-index: 2;
display: none;
}
#rss-icon {
width: 42px;
height: 42px;
background: url(../images/rssbutton.png) no-repeat 0 0;
text-indent: -9999px;
margin: 0 auto;
display: block;
}
The HTML:
<div class="rss-popup">
RSS Feed
<em>Subscribe to our RSS Feed</em>
</div>
I want to make the rssbuttonbubble.png appear underneath rather then from above, can any make any suggestions as to how I can achieve this?

Just adjust your top values in the animation and css to be the distance you want:
$(".rss-popup a").hover(function() {
$(this).next("em").stop(true, true).animate({opacity: "show", top: "60"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "70"}, "fast");
});
And in CSS change top: -70px; to:
top: 70px;
This will make it appear below, then just decrease those values if you want it higher, increase if you want it lower.

Nick's answer is correct. You will want to attempt to do this via CSS but just in case you can't you could also achieve something similiar via Jquery. There is an offset() function that returns the onscreen position of a matched element. Once you have that you can then set the position of another element to this position and add the source elements height to the Y coordinate.
See the jQuery documentation here.