Develop Reference

jQuery stop listening event while animate

I'm writing some code with jQuery.
There are some div with class 'icon' in my html, and I hide a div with class 'hide' beside each 'icon'.
I want that when user's mouse get in to 'icon', the corresponding 'hide' will make animate.
But I found that if I quickly move the mouse in and out the 'icon'. The animate will excute twice. And it make my web's visual effects very terrible.
So I want stop the event while animate excuting, I read a lot of artical and document then try, but still can't solve it.
This is my code.
$(".icon").on("mouseenter", function(){
$(this).closest(".slideli").find(".hide").show("slide", {direction: 'right'}).animate({duration: 500, easing: "swing", queue: false});
});
$(".icon").on("mouseleave", function(){
$(this).closest(".slideli").find(".hide").hide("slide", {direction: 'right'}).animate({duration: 500, easing: "swing", queue: false});
});

To avoid event to be fired on animated element(s), you should use pseudo selector :animated as following: :not(:animated)
$(".icon").on("mouseenter", function(){
$(this).closest(".slideli").find(".hide").filter(":not(:animated)").show("slide", {direction: 'right'}).animate({duration: 500, easing: "swing", queue: false});
});
$(".icon").on("mouseleave", function(){
$(this).closest(".slideli").find(".hide").filter(":not(:animated)").hide("slide", {direction: 'right'}).animate({duration: 500, easing: "swing", queue: false});
});

You should use jQuery's .stop() to prevent new animations from being added to the queue all the time. You can either use .stop(true,true) or .stop(true,false) depending on your need:
if you only want to clear the animation queue and let it animate to completion by itself, use .stop(true,false)
if you want to clear the animation queue and force the animation to jump to its end state immediately, use .stop(true,true)
Here's your improved code:
$(".icon").on("mouseenter", function(){
$(this)
.closest(".slideli")
.find(".hide")
.stop(true,true)
.show("slide", {direction: 'right'})
.animate({duration: 500, easing: "swing", queue: false});
});
$(".icon").on("mouseleave", function(){
$(this)
.closest(".slideli")
.find(".hide")
.stop(true,true)
.hide("slide", {direction: 'right'})
.animate({duration: 500, easing: "swing", queue: false});
});
You may also use .finish(), but since your animation is rather simple (you are not chaining consecutive animations in any instances), .stop() can do the same job, too.
p/s: A shameless plug to a quick article on handling jQuery animations I published some time ago: How to .stop() writing bad jQuery animations

Adjust speed on jQuery UI accordion

I have a jQuery UI accordion of which I need to urgently change the speed/duration of the animation before the site goes live.
$(".faq-accordion > div").accordion({ header: "h4", collapsible: true, active: false, speed: "fast", });
Editing the speed in this line doesn't affect anything.
See JSFiddle for full code.
The show all/hide all buttons open the accordion at a much faster speed than when they are individually clicked.
I need to speed up the animation of the accordion so both are the same speed if possible.

If you take a look at the accordion API you'll see that there's no option called speed, you need to use animate. The equivalent to a duration setting of fast for slideUp and slideDown, in milliseconds, is 200, so you can just use that as a number value:
$(".faq-accordion > div").accordion({
header: "h4", collapsible: true, active: false,
animate:200
});
Here's your fiddle updated with this: http://jsfiddle.net/z3Lx1o0y/

You can specify the speed at a more granular level in the slideUp/slideDown function
e.g.
$('.applying div div').slideDown(1000);
Try tweaking this.

How to define easing option in jquery animation?

I need to set easing 'easeInCubic' on an animation done using jQuery.
Here my code:
$('#content-scroll-inner:not(:animated)').animate({ 'top': moveOf}, this.animationSpeed, this.cbEndAnimation.bind(this));
Trying something like
$('#content-scroll-inner:not(:animated)').animate({ 'top': moveOf},'easeInCubic', this.animationSpeed, this.cbEndAnimation.bind(this));
What am I doing wrong and how to fix it?

Use easing option to set easing effect:
easing: 'easeInCubic'
This way:
$('#content-scroll-inner:not(:animated)').animate({ 'top': moveOf},easing:'easeInCubic', this.animationSpeed, this.cbEndAnimation.bind(this));

Use easing
Optional. Specifies the speed of the element in different points of
the animation. Default value is "swing". Possible values: "swing" -
moves slower at the beginning/end, but faster in the middle "linear" -
moves in a constant speed Tip: More easing functions are available in
external plugins.
With animate():
$('#content-scroll-inner:not(:animated)').animate({ 'top': moveOf},easing:'easeInCubic', this.animationSpeed, this.cbEndAnimation.bind(this));
With addClass()
$('.foot').addClass('slide-down', 1000, 'easeInCubic');

use easing: and make sure to add jquery.ui.js in your script tag. Please read this documentation

How to use embedded functions(One Scroll Page by Pete - peachananr)

recently I am working on a page using this awesome plugin:
https://github.com/peachananr/onepage-scroll
However I am not familiar with JavaScript so I will be obliged if someone could explain to me few things:
I'd like to combine one-scroll-page behaviour with anchor scrolling, simple example:
function scrollContent(id) {
$('html, body').animate({ scrollTop: $('#' + id).offset().top }, 1000 );
}
as far as I know there is an embedded function called "$.fn.moveTo(page_index)"(see plugin link) but I wasn't able to use it successfully.
I'd like to turn a slider when leaving page #1 to save resources, slider launches with function:
$('#da-slider').cslider({
autoplay : true,
interval : 8000,
});
tried to simply turn off autoplay by messing with callbacks but it turned out to be bad solution:
$(".main").onepage_scroll({
sectionContainer: "section", // sectionContainer accepts any kind of selector in case you don't want to use section
easing: "ease", // Easing options accepts the CSS3 easing animation such "ease", "linear", "ease-in",
// "ease-out", "ease-in-out", or even cubic bezier value such as "cubic-bezier(0.175, 0.885, 0.420, 1.310)"
animationTime: 1000, // AnimationTime let you define how long each section takes to animate
pagination: true, // You can either show or hide the pagination. Toggle true for show, false for hide.
updateURL: true, // Toggle this true if you want the URL to be updated automatically when the user scroll to each page.
beforeMove: function(index) {}, // This option accepts a callback function. The function will be called before the page moves.
afterMove: function(#1) {
$('#da-slider').cslider({
autoplay : off,
interval : 8000,
});
}, // This option accepts a callback function. The function will be called after the page moves.
loop: true, // You can have the page loop back to the top/bottom when the user navigates at up/down on the first/last page.
keyboard: true, // You can activate the keyboard controls
responsiveFallback: 600, // You can fallback to normal page scroll by defining the width of the browser in which
// you want the responsive fallback to be triggered. For example, set this to 600 and whenever
// the browser's width is less than 600, the fallback will kick in.
direction: "horizontal" // You can now define the direction of the One Page Scroll animation. Options available are "vertical" and "horizontal". The default value is "vertical".
});
Every tip, even link to jquery tutorial will be very helpfull. Thanks in advance!

Solution found:
$("#your-div-id").on("click", function(){$(".main").moveTo(2);});

How to drop down menu will drop in zero second

I have a drop down menu of JS in my website Please click here for website but its dropping very slow. Below is the JS code I am having. Please let me know how to make it to drop fast in Zero Second...
$(document).ready(function($){
$('#mega-menu-7').dcMegaMenu({
rowItems: '3',
speed: 'fast',
effect: 'slide'
});
});

Change speed: 'fast' to speed: 0. dcMegaMenu uses the literal speed value for the animation time, so if you set it to 0 it doesn't actually animate and will perform the transition instantly.