Javascript 如何使用jquery从左到右或从右到左设置2个css布局的动画？

我的jQuery水平是业余水平，现在我努力用幻灯片来解决这个问题，我知道如何使fadeout或fadein与变量一起工作，但我不能从左到右或从右到左动画2个不同的布局和下一个属性：

1.第一个布局是活动布局，

显示：块

； 2.第二个版面（按下下一个按钮时显示但同时删除第一个版面的幻灯片/版面）不是活动幻灯片，

显示：无

我被卡住了：

$('.next').click(function(){
var currentSlide=$('.active-slide');
var nextSlide=currentSlide.next();
currentSlide.removeClass('active-slide');
nextSlide.addClass('active-slide');
});

附加图像以便于查看：

有关详细信息，请访问网站链接： 给你。 添加一个内部div，如：

<div class="slide1">
    <div class="slide-inner">
        ......
    </div>
</div>

jQuery：

jQuery(document).ready(function(){
    var totalWidth = 0;
    var select = jQuery('.slide1').find('.slide-inner > div');
    select.each(function(index) {
      totalWidth = +(totalWidth)+(+$(this).outerWidth(true));   
    });

    jQuery('.slide-inner').width(totalWidth);

    $('.next').click(function(){
        var currentSlide=$('.active-slide');
        var nextSlide=currentSlide.next();
        //currentSlide.removeClass('active-slide');
        //nextSlide.addClass('active-slide');

        // .position() uses position relative to the offset parent, 
        var pos = nextSlide.position();

        // .outerWidth() takes into account border and padding.
        var width = nextSlide.outerWidth();

        //show the menu directly over the placeholder
        jQuery('.slide-inner').animate({"left":(pos.left + width) + "px"}, "slow");
    });
});

---

向我们展示您的html和样式您是想用淡入淡出的方式滑动图像，还是只想将项目移动到一个大div中？[link]有关详细信息，请参阅链接页。在一个大的分区内移动项目，但有两种不同的布局。这不起作用，伙计，也许你可以帮我举一个关于小提琴的视觉例子。谢谢

jQuery(document).ready(function(){
    var totalWidth = 0;
    var select = jQuery('.slide1').find('.slide-inner > div');
    select.each(function(index) {
      totalWidth = +(totalWidth)+(+$(this).outerWidth(true));   
    });

    jQuery('.slide-inner').width(totalWidth);

    $('.next').click(function(){
        var currentSlide=$('.active-slide');
        var nextSlide=currentSlide.next();
        //currentSlide.removeClass('active-slide');
        //nextSlide.addClass('active-slide');

        // .position() uses position relative to the offset parent, 
        var pos = nextSlide.position();

        // .outerWidth() takes into account border and padding.
        var width = nextSlide.outerWidth();

        //show the menu directly over the placeholder
        jQuery('.slide-inner').animate({"left":(pos.left + width) + "px"}, "slow");
    });
});