Jquery Slider Effect

I am using jQuery for a slider effect on button click. My code is:

$(document).ready(function() {

  $("#mybutton").click(function () { 
      $("#slidemarginleft").hide("slide",开发者_开发百科 { direction: "down" }, 1000);
});
});

When I click on the button, a JavaScript error occurs:

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

The code snippet he provided is straight out of the jQuery UI documentation:

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

I just got this error and the issue was that the jQuery UI script wasn't loaded (D'oh!). jQuery UI is required for the easing animations.

Try adding this to see if it resolves the problem:

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

Try this version of jquery.easing

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

it solved my problem.

I think that the problem is the second argument you are passing to the hide method. From the jQuery documentation on Hide(), it says:

duration A string or number determining how long the animation will run.
easing A string indicating which easing function to use for the transition.
callback A function to call once the animation is complete

Your second argument is a javascript object, not a string. It is trying to find an easing function called { direction: "down" } and not having any luck. The only easing implementations in the jQuery library are the default, called swing, and one that progresses at a constant pace, called linear. You also have what looks like a duration as the third parameter and it should be the first.

I also wonder why you are using the hide() method to do a jQuery slide instead of the slideToggle() method or just slideDown() or slideUp() as your needs may be.

Assuming you're trying to achieve the effect of hiding an element with a "slide down" motion, maybe 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();   
    });
});

This error could 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.

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

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

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

One can search this in all js files to locate such an 'offender':

Query.extend({easing:{

replace ur code with the below link and ur problem will get solved

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