Develop Reference

How To Toggle Back To Original State

My Script Snippet:
$(document).on('click', function(e) {
if ($(e.target).closest('.input-actions.Actions').length) {
var CurrentWidth = $(e.target).width() + 'px',
OpenWidth = '308px';
if ($(e.target).is('.dropdown-toggle')) {
$(e.target).animate({
width:OpenWidth
}, {
direction: 'right',
duration: 500,
});
setTimeout(function() {
$(e.target).parent().find('.dropdown-menu').slideDown({
height: '249px',
}, {
duration: 500,
});
}, 800);
}
}
});
Script Explanation:
On click of the link, the button changes with to match the drop down via animate then with the delay the drop down slides down.
What I'd Like To Achieve:
I'd like to add, in the most simplistic way, a toggle feature so that upon clicking again the reverse occurs animating the $(e.target) back to CurrentWidth and $(e.target).parent().find('.dropdown-menu') to slide back up and hide.

folding menu with jquery not working

Hello I used to use this piece of code to fold and unfold the menu in my website with jquery 1.8.3 but after updating this to >1.10.2 it hides the menu automatically again. I think this is because it goes through all the code. How can I change this to work with the new update? ( sorry for my lack of javascript )
$(document).ready(function() {
$('#menu-button').toggle(function() {
$('#menu').animate({
marginTop: '+=10',
height: '100%',
opacity: 1
}, 300, function() {
// Animation complete.
});
}, function() {
$('#menu').animate({
marginTop: '-=10',
opacity: 0,
height: '0px'
}, 300, function() {
// Animation complete.
});
});
});
click here for a working example of how it is now.

Just rewrite it with toggleClass();
Here is working jsbin : http://jsbin.com/razeguma/4/edit

jQuery Slideup and Fadein Effect at the same Time

I'm learning new stuff with jQuery here and I have seen a effect that I like link here
Meet my Team section. As you can see if you scroll down the circle slidesup and fades in at the same time. I tried to replicate that effect. Here's my jsfiddle
$(window).on("scroll", function() {
if ($(window).scrollTop() >= $('#thumbnails-cont').offset().top-$(window).height()) {
$("#thumbnails img").animate({opacity: 1, bottom: 0})
}
});

You have to work with the queue property to play animations simultaneously.
Working fiddle: Here
Basic code:
$(function() {
$(".thumbnail").animate({ opacity: 1 }, { duration: 1200, queue: false });
$(".thumbnail").animate({ "margin-top": "0px" }, { duration: 1200, queue: false });
});
Read this for more information about the animation function in jQuery.
I hope I could help you a bit :)

Why doesn't this simple toggle work?

Ok firstly - its not a toggle() as such.
This code is supposed to work like a slider. 1 Div is showing, you click a button, and the next div shows, click another button, and the first div shows.
This works so far, but it doesn't work going backwards. So the button works to show the 2nd Div, but hitting the 'less' button I made just makes the second div disappear and the 1st remains hidden.
Here is the code:
$('.more').click(function() {
$('.c1')
.animate({ left: "-828px" }, 600, 'easeInOutQuint')
.delay(300, function() {
$('.c2').animate({ left: "0px" }, 600, 'easeInOutQuint');
}
);
});
$('.less').click(function() {
$('.c2')
.animate({ left: "828px" }, 600, 'easeInOutQuint')
.delay(300, function(){
$('.c1').animate({ left: "0px" }, 600, 'easeInOutQuint');
}
);
});
What am I missing? And how could I do this so that I'm basically not repeating the same code twice?

have you tried with callback functions instead of delay ?
$('.more').click(function(){
$('.c1').animate({ left:"-828px"}, 600, 'easeInOutQuint',function(){
$('.c2').animate({left:"0px"}, 600, 'easeInOutQuint');
});
});
$('.less').click(function(){
$('.c2').animate({ left:"828px"}, 600, 'easeInOutQuint',function(){
$('.c1').animate({left:"0px"}, 600, 'easeInOutQuint');
});
});

You have a wrong concept about .delay.
In jquery documentation:
Description: Set a timer to delay execution of subsequent items in the queue.
And its parameters are: duration [, queueName].
Also, from SO answer:
The delay() function only applies to actions queued on the element
So I think your best choice is, as #nicolast said, use the callbacks. Here it is working. And the final code is:
$('.more').click(function() {
$('.c1')
.animate({ left: "-400px" }, 600, function() {
$('.c2').animate({ left: "0px" }, 600);
}
);
});
$('.less').click(function() {
$('.c2')
.animate({ left: "400px" }, 600, function(){
$('.c1').animate({ left: "0px" }, 600);
}
);
});

This reproduce works.
When pressing more: c1 goes to -100px and after that c2 goes to 0px
When pressing less: c2 goes to 100px and after that c1 goes to 0px
$('.more').click(function() {
$('.c1')
.stop()
.animate({ left: "-100px" }, 600, 'linear')
.delay(300, function() {
$('.c2').stop().animate({ left: "0px" }, 600, 'linear');
});
});
$('.less').click(function() {
$('.c2')
.stop()
.animate({ left: "100px" }, 600, 'linear')
.delay(300, function(){
$('.c1').stop().animate({ left: "0px" }, 600, 'linear');
});
});

How to run two jQuery animations simultaneously?

Is it possible to run two animations on two different elements simultaneously? I need the opposite of this question Jquery queueing animations.
I need to do something like this...
$('#first').animate({ width: 200 }, 200);
$('#second').animate({ width: 600 }, 200);
but to run those two at the same time. The only thing I could think of would be using setTimeout once for each animation, but I don't think it is the best solution.

yes there is!
$(function () {
$("#first").animate({
width: '200px'
}, { duration: 200, queue: false });
$("#second").animate({
width: '600px'
}, { duration: 200, queue: false });
});

That would run simultaneously yes.
what if you wanted to run two animations on the same element simultaneously ?
$(function () {
$('#first').animate({ width: '200px' }, 200);
$('#first').animate({ marginTop: '50px' }, 200);
});
This ends up queuing the animations.
to get to run them simultaneously you would use only one line.
$(function () {
$('#first').animate({ width: '200px', marginTop:'50px' }, 200);
});
Is there any other way to run two different animation on the same element simultaneously ?

I believe I found the solution in the jQuery documentation:
Animates all paragraph to a left style
of 50 and opacity of 1 (opaque,
visible), completing the animation
within 500 milliseconds. It also will
do it outside the queue, meaning it
will automatically start without
waiting for its turn.
$( "p" ).animate({
left: "50px", opacity: 1
}, { duration: 500, queue: false });
simply add: queue: false.

If you run the above as they are, they will appear to run simultaenously.
Here's some test code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(function () {
$('#first').animate({ width: 200 }, 200);
$('#second').animate({ width: 600 }, 200);
});
</script>
<div id="first" style="border:1px solid black; height:50px; width:50px"></div>
<div id="second" style="border:1px solid black; height:50px; width:50px"></div>

While it's true that consecutive calls to animate will give the appearance they are running at the same time, the underlying truth is they're distinct animations running very close to parallel.
To insure the animations are indeed running at the same time use:
$(function() {
$('#first').animate({..., queue: 'my-animation'});
$('#second').animate({..., queue: 'my-animation'});
$('#first,#second').dequeue('my-animation');
});
Further animations can be added to the 'my-animation' queue and all can be initiated provided the last animation dequeue's them.
Cheers,
Anthony

See this brilliant blog post about animating values in objects.. you can then use the values to animate whatever you like, 100% simultaneously!
http://www.josscrowcroft.com/2011/code/jquery-animate-increment-decrement-numeric-text-elements-value/
I've used it like this to slide in/out:
slide : function(id, prop, from, to) {
if (from < to) {
// Sliding out
var fromvals = { add: from, subtract: 0 };
var tovals = { add: to, subtract: 0 };
} else {
// Sliding back in
var fromvals = { add: from, subtract: to };
var tovals = { add: from, subtract: from };
}
$(fromvals).animate(tovals, {
duration: 200,
easing: 'swing', // can be anything
step: function () { // called on every step
// Slide using the entire -ms-grid-columns setting
$(id).css(prop, (this.add - this.subtract) + 'px 1.5fr 0.3fr 8fr 3fr 5fr 0.5fr');
}
});
}

Posting my answer to help someone, the top rated answer didn't solve my qualm.
When I implemented the following [from the top answer], my vertical scroll animation just jittered back and forth:
$(function () {
$("#first").animate({
width: '200px'
}, { duration: 200, queue: false });
$("#second").animate({
width: '600px'
}, { duration: 200, queue: false });
});
I referred to: W3 Schools Set Interval and it solved my issue, namely the 'Syntax' section:
setInterval(function, milliseconds, param1, param2, ...)
Having my parameters of the form { duration: 200, queue: false } forced a duration of zero and it only looked at the parameters for guidance.
The long and short, here's my code, if you want to understand why it works, read the link or analyse the interval expected parameters:
var $scrollDiv = '#mytestdiv';
var $scrollSpeed = 1000;
var $interval = 800;
function configureRepeats() {
window.setInterval(function () {
autoScroll($scrollDiv, $scrollSpeed);
}, $interval, { queue: false });
};
Where 'autoScroll' is:
$($scrollDiv).animate({
scrollTop: $($scrollDiv).get(0).scrollHeight
}, { duration: $scrollSpeed });
//Scroll to top immediately
$($scrollDiv).animate({
scrollTop: 0
}, 0);
Happy coding!