Develop Reference

jQuery animation to the left won't trigger after the div is animated to the right

So I made a simple animation in jquery where I animate two rows of images by clicking on the left/right arrows, which moves them to left or right. Now the problem is strange, when I click on the right arrow after loading, the animation works fine and the div with images is animated to the right and returns to it's original position. But when I try to click on the left arrow immediately afterwards, the images won't animate to the left. However, if I press the left arrow and then right, the animation works well enough. So basically after animating to the right there's no turning back and the left arrow doesn't work.
I'm not sure what might be the problem but I've tried animating different elements in the same way and noticed that it's impossible for me to animate the element to the left after animating it to the right (and returning to the initial position). I would appreciate if you could help me with this, I'm still pretty new to jQuery so I might've done a dumb mistake without noticing.
Here's the whole codepen:
https://codepen.io/Ellie555/pen/EBKPVp
I tried a lot of different things, I've previously thought the problem is in the fact that after the animation ends I switch the order of the first and last image in the row, but even after deleting that part the animation still doesn't work properly. I tried switching the order of functions and putting it all under one function, still didn't help.
var distance = $('.first-row').children().last().outerWidth();
var images = $('.img-item');
$('.arrow-right').click(function(){
images.animate({left: distance},400, function(){
images.css('left', '0px');
});
});
$('.arrow-left').click(function(){
images.animate({right: distance},400, function(){
images.css('right', '0px');
});
});

The css "right" doesn't mean to get the coordinates of the element some pixels from the right, but it is counted from right to left, so right: 0px; is at the right of the screen. left: 0px; isat the left of the screen. So if you gave the element a css right property, the left won't have any effect. Try:
for the left click:
images.animate({left: '+=' + distance}, 400)
or
for the right click:
images.animate({left: '-=' + distance}, 400)
I hope I helped you.

Jquery animate Slide left(extend) and slide down

I am not very familiar with jquery's animate and I need to create an element which upon click of another element, the element should slide from left to right(currently hides behind another element).
Then shows its full content(like a drop down menu) after extending fully from left to right. I tried doing it using transition effects but its is not that powerful(in terms of flexibilty/control)
Anyone knows a good way to do this? Thanks
[EDIT] hers a jsfiddle of what I am doing so far
$('#menu-btn').click(function(event) {
$('#whole').animate({
left: '100px'
},500,
function(){
left: '-100px'
});
});

I think you need something like:
$('#menu-btn').click(function(event) {
$('#whole').animate({
left: '100px'
},500,
function(){
$('#data').slideDown();
});
});
Slide down the whole instead if that is what you were thinking.
I updated the fiddle. You had .#whole instead of #whole which prevented that style.
EDIT:
See my forked fiddle for a nicer solution: http://jsfiddle.net/6ETK8/6/
Or using css transitions: http://jsfiddle.net/6ETK8/7/

I think you want to do two animations:
animate the element from left to right (slide to right)
animate the contents of the element, or a element inside the first element, from top to bottom (slide down).
animations should run one after the other, not in parallel.
Learn about .animate(). Then you can achieve this by starting the first animation (slide to right), and, in its complete handler, start the second animation (slide down).
By the way, it is possible, an relatively easy, to do this with transitions.

animations of multiple widths simultaneously, amounting to 100%

I am trying to adjust the widths of two elements to expand to a wider area when a user closes a left panel.
To do this I animate the left panel to right: 100%, and expand the first element to take over more area while keeping the second element with a fixed width (which also is an animation since now the whole div takes up more space so his percentage needs to change in order for it to take up the same pixel width)
The code is rather long so I won't post much of it here, stack overflow requires something so here's how I do the width animations:
$('#centerWeb').animate({
"width": "81.33333333%"
}, {
duration: 1000,
queue: false
});
JSFiddle: http://jsfiddle.net/dpPG7/
I have several problems, the first, the animation isn't 'smooth', it's fidgety, I've heard or people saying that you can use the same timer queue for queuing animations but I couldn't find how (since I believed that small differences in percentages might cause this).
Any ideas anyone could help with?
My second problem is that sometimes, like in the jsfiddle example, one of the center elements bounces down a row. In my complete web this happens when re-expanding the left area however in the JSfiddle example it happens when minimizing the left area.
In the JSFiddle: The left area when clicked removes it and expands the rest, and the red button when clicked expands the left area back.
My third and final problem, the animation of the left area, when expanding it back, doesn't occur at the same time as the expansion of the first center area (the actionList), it occurs once it's finished, despite being queue:false.

As I commented, I personally prefer this codepen example:
#rightContainer{
-webkit-transition: all linear 300ms;
.. /* browser compatibility & remaining styles */
}
#rightContainer.shrink {
left:20%;
}
and
$("#btn").click(function(){
$("#rightContainer").toggleClass("shrink");
});
Which is imo clean & good practise.

Using waypoints plugin to fade elements into and out of viewport on scroll

I've been a little stuck on the following issue for some time. Essentially I have vertically stacked DIVs, all of the same characteristics and CSS class (.vert-container).
On scroll down, opacity of the top view-able DIV reduced as it leaves the top of the viewport.
On scroll down, opacity of the bottom view-able DIV increased as it enters the viewport.
This effect of the top DIV fading out and the last fading in to continue for all of these DIVs.
I have been trying to achieve this with a combination of the jQuery waypoints plugin and fading opacity.
Anyone who can help me, it would be greatly appreciated. I will post my very incomplete code so far for the sake of a starting point.
$(document).ready(function(){
$('.vert-container .inner').waypoint({
handler: function() {
$('.vert-container .inner').stop().animate({ "opacity": 0.2 }); // Fade out the DIV that is leaving viewport
},
offset: '50%'
});
});

I tried to do it with opacity but I was having trouble with the Javascript. I came up with this, though.
It isn't exactly what you're looking for but I think it's pretty close with much less hassle and no Javascript.
I would use the :before and :after elements on a container to make gradients at the top and bottom of the element so it sort of fakes the opacity.
Here's a quick demo: http://jsbin.com/aVaSIJuB/1/edit?html,css,output

jQuery slide down toggle, impossible?

I want to do a slide down with jQuery, but I can't find it anywhere.
I do not want it to scale as it slides
I do want it to perform this action ( click slide ), but vertically down, not horizontally right.
UPDATE :
So here's the final functional code!
$(this).toggle(
"slide",
{
direction: 'up',
duration: 'slow',
easing: 'easeOutQuart'
}
);

Read the API-Docs: http://docs.jquery.com/UI/Effects/Slide
You can Slide in every direction using the direction-option.
Demo: http://www.jsfiddle.net/doktormolle/befbE/
(I set the width/height of the image inside the sliding element to 100%, so you can see, the image is not scaled, it's clipped, guess that's what you are looking for)

If you position the element absolutely in a container and attach it to the bottom (ie. position:absolute;bottom:0;) you can use the blind effect and it will slide down to the bottom from the top. See here

If you want it the make own ur you, can you use .animate() and you using css.
something like:
css:
#elm { width: 150px; height: 80px; position: absolute; left: -150px; }
script:
// let it animate
$('#elm').animate({ display: 'block', left: 0 }, 'fast');
else if you dont wanna make it on your own, use that jQuery UI 'slide' effect?

I know what you mean - the items inside the DIV or whatever you are animating look like they are squahsed, and then expand.
Maybe consider hiding the element behind another and either move the masking element up and out of the way or slide the hidden element down using .animate()?
jQuery .click .animate to move down, then back up
This may help.

You can easily achieve this with an inner container that has fixed dimentions.
See this live example. In the fiddle, the first div is without the inner container.
This way when the outer container animates (width/height) the inner container does not grow, simply reveals.

Consider your image of height 150px
First apply height="0"
Use animate to achieve slide down effect
<img src="http://www.google.com/images/nav_logo29.png" id="image_scale" width="200" height="0" />
<script>
$(document).ready(function(){
$("#image_scale").animate({height:"150px"},"5000");
});
</script>

Absolutely position the element you are wanting to slide in and out and use .animate() to change it's position. You can have it slide in from the top, bottom, left, right, on the diagonal or however you want with this method.