JQuery Slider Effect

Question

I use jQuery for the slider effect when I click a button. My code is:

$(document).ready(function() { $("#mybutton").click(function () { $("#slidemarginleft").hide("slide", { direction: "down" }, 1000); }); }); 

When I click the button, a JavaScript error occurs:

 f.easing[e.animatedProperties[this.prop]] is not a function 

Answer 1

Snapshots of the code he provided right from the jQuery UI documentation :

 $("div").click(function () { $(this).hide("slide", { direction: "down" }, 1000); }); 

I just got this error and the problem is that the jQuery script user interface has not been loaded (D'oh!). To facilitate animation, the jQuery user interface is required.

Try adding this to see if the problem resolves:

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script> 

Answer 2

Try this version of jquery.easing

http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js

he solved my problem.

Answer 3

I think the problem is the second argument that you pass to the hide method. From the jQuery documentation in Hide () it says:

duration A string or number that determines how long the animation will work.
easing A string indicating which easing function to use for the transition.
callback Function to call after animation is complete

The second argument is a javascript object, not a string. He is trying to find a weakening function called {direction: "down"}, and has no luck. The only facilitating implementations in the jQuery library are the default values ​​called swing, and one that progresses at a constant speed, called linear. You also have what looks like the third parameter, and it should be the first.

I am also wondering why you use the hide () method to create a jQuery slide instead of the slideToggle () method or just slideDown () or slideUp (), as your needs may be.

Answer 4

Assuming you are trying to achieve the effect of hiding an element with a downward motion, perhaps try something like this ...

Demo: http://jsfiddle.net/wdm954/Frumm/3/

 $('#button').click(function() { var h = $('#slide').height(); $('#slide').animate({ height: 0, marginTop: h+"px" }, 1000, function() { $(this).hide(); }); }); 

Answer 5

This error may also be caused by an invalid effect value. For example: $(this).hide("slid", {}, 1000); Valid effect values ​​are: 'blind', 'clip', 'drop', 'explode', 'fold', 'puff', 'slide', 'scale', 'size', 'pulsate'.

See here .

Answer 6

I had a similar problem. jquery-easing-1.3.pack.js did not work alone BUT in combination with jquery-easing-compatibility.1.2.pack.js it did the trick =)

dl here: http://sliding1.googlecode.com/files/jquery-easing-compatibility.1.2.pack.js

Answer 7

Another reason may be that one had a jquery plugin that contained its own easing plugin for compactness, effectively replacing the latest facilitating functions.

You can find this in all js files to find such a "culprit":

 Query.extend({easing:{ 

Answer 8

replace ur code with the link below and ur problem will be solved.

http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js