CODEWITHSUNDEEP
jquery
Durga Dutt
Durga Dutt

Reputation: 4113

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

Upvotes: 6

Views: 17708

Answers (8)

Sachin Shukla
Sachin Shukla

Reputation: 1279

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

Upvotes: 0

Johan
Johan

Reputation: 647

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:{

Upvotes: 0

Marion LP
Marion LP

Reputation: 142

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

Upvotes: 0

Alex Barker
Alex Barker

Reputation: 4400

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.

Upvotes: 0

Vicky Raj Sharma
Vicky Raj Sharma

Reputation: 41

Try this version of jquery.easing

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

it solved my problem.

Upvotes: 3

Justin Searls
Justin Searls

Reputation: 4866

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>

Upvotes: 13

wdm
wdm

Reputation: 7189

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();   
    });
});

Upvotes: 0

Pete
Pete

Reputation: 4051

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.

Upvotes: 0

Related Questions