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

Question

我的 jQuery 水平是业余的，现在我努力用幻灯片来解决这个问题，我知道如何使用变量进行淡出或淡入，但我不能从左到右或从右到左制作动画 2 种不同的布局与 next属性:

1.第一个布局是事件布局，display:block； 2.第二个布局(下一次按下按钮时显示的幻灯片/布局，但同时删除第一个布局)不是事件幻灯片，display:none;

这里我卡住了:

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

附加图片以提高可见性: image

更多信息的网站链接: Website

Answer 1

给你。 添加一个内部 div，例如:

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

CSS:

.slide-inner {
    left: 0;
    position: absolute;
    width: 100%;
}

.slide1 {
    overflow: hidden;
    position: relative;
}

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