jQuery UI slide direction issue

Question

I'm adding a slide menu effect to my site using jQuery UI, but I'm having a small and very odd issue. Here is my code:

$(document).ready(function(){
    $(".menuitem").hide();
    var url = window.location;
    $('.menulink').filter(function() {
        return this.href == url;
    }).removeClass('menulink');
    $($(".menuitem").get().reverse()).each(function(i, e) {
        $(this).delay(i*400).toggle("slide");
    });
});

Adding ", { direction: "left" }" after the "slide" makes the element appear instead of sliding.

Could it be my implementation of jQuery UI? This is the code I'm using:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

score 0 · Accepted Answer · edited May 23 '17 at 12:18

0

Try the below code,

$($(".menuitem").get().reverse()).each(function(i, e) {
        $(this).delay(i*400).toggle('slide', {
            direction: 'left'
        }, 1000);
    });

FYI: The toggle() method was deprecated in jQuery version 1.8, and removed in version 1.9.

Here is a SO question regarding toggle replacement and for more slide tutorial you can try this link.

Hope this helps.

edited May 23 '17 at 12:18

Community

1
1

answered May 31 '13 at 19:26

Praveen

55,303
33
133
164

Didn't work. Are my versions for jquery and jqueryui correct? – Flaxbeard May 31 '13 at 19:28
@Flaxbeard that right, your Jquery version does not support `toggle()`. [http://code.jquery.com/jquery-1.8.3.js](http://code.jquery.com/jquery-1.8.3.js) this should work. – Praveen May 31 '13 at 19:32
Ah... Toggle itself works fine though, even though it's depreciated? What can I use instead? The toggle works, but instead of sliding from the left, it's from the top-left, and adding direction: 'left' breaks it entirely. – Flaxbeard May 31 '13 at 19:34
@Flaxbeard I would suggest `animate()` – Praveen May 31 '13 at 19:37
Does animate() work with slide left? (Also, does the google library have the slide function?) – Flaxbeard May 31 '13 at 19:38
Animate won't work for what I need. The elements have a position, and I want them to slide to it in a certain order, like what toggle slide does but only from the left. – Flaxbeard May 31 '13 at 19:41
The only issue is that the items are hidden and when they slide they bump the previous one up. How can I fix this? With just plain toggle slide on my site (not on jSfiddle) it doesn't do that... – Flaxbeard May 31 '13 at 19:51
The example here (without jQueryUI) Seems to work, oddly enough. http://jsfiddle.net/Pxrvx/ – Flaxbeard May 31 '13 at 19:58
@Flaxbeard I'm not sure whether you're trying this [JSFiddle](http://jsfiddle.net/praveen_jegan/gsx4v/) – Praveen Jun 01 '13 at 11:21

jQuery UI slide direction issue

1 Answers1