jquery - 如何从左到右应用 silde 切换效果

Question

嗨 iam 使用 ajax post 方法，如果我单击侧边栏并且对于 ajax 成功结果 iam 将它附加到这样的 div

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

它给了我向下滑动的效果，这很好，但是如果我想从左到右应用切换，我该怎么办，有人可以建议我吗

Answer 1

使用 jQuery UI 应该很容易：

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

Answer 2

您可能想自己创建自定义动画

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

这是一个演示http://jsbin.com/ufetit/1/edit