How to apply silde toggle effect from left to right

Question

Hi iam using ajax post method if i click on sidebar and for the ajax success result iam appending it to the div like this

$.ajax({
      type: "POST",
      url: "{site_url}publish/my_select_section_form/"+item,
      success:function(data){
            $('.sec-details').hide().html(data).slideDown();
        }
    });

it giving me sliding down effect and thats fine but if I want to apply toggle from left to right what can I do,can anyone suggest me

There is no built in function for this to my knowledge but look into animating the left or right attributes. this should give you the desired effects. — Nomad101, May 04 '13 at 12:14
No @Nomad101 iam not looking for inbuilt,bec I also know that it is not possible through in-built,iam looking for any custome code also — GautamD31, May 04 '13 at 12:17
Maybe this http://stackoverflow.com/questions/4287578/jquery-animate-slide-left can help you — Mangiucugna, May 04 '13 at 12:17

Roko C. Buljan · Accepted Answer · 2013-05-04T12:31:03.297

2

Using jQuery UI sould be quite easy:

http://jsbin.com/ipugec/2/edit

$.ajax({
   type: "POST",
   url: "{site_url}publish/my_select_section_form/"+item,
   success:function(data){
     // $('.sec-details').hide().html(data).slideDown();
     $('.sec-details').hide().html(data).show("slide", { direction: "left" }, 1000);
   }
});

edited May 04 '13 at 12:31

answered May 04 '13 at 12:23

Roko C. Buljan

196,159
39
305
313

But I got this Uncaught TypeError: Property '# – GautamD31 May 04 '13 at 12:27
@Gautam3164 have you included **jQuery UI** AFTER you included your jQuery library? – Roko C. Buljan May 04 '13 at 12:29
@Gautam3164 added an example in my answer – Roko C. Buljan May 04 '13 at 12:31

score 0 · Answer 2 · answered May 04 '13 at 12:24

You might want to create custom animation by yourself

CSS

.sec-details { position: relative; }

JS

$(".sec-details").hide().html(data)
$(".sec-details")
    .css({ 'opacity': 0, 'display': 'block', 'left' : '-150'})
    .animate({opacity: 1, left: 0}, 500);

Here is a demo http://jsbin.com/ufetit/1/edit

How to apply silde toggle effect from left to right

2 Answers2