Question

我喜欢使用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

如何从左到右应用幻灯片切换效果

2 个答案: