javascript - 控制 JQuery 动画函数

Question

我一直在玩“marginLeft: “100%””，但这只会将 div 完全移出屏幕。我希望 div onClick float :靠在屏幕右侧的边缘。

JSFiddle: https://jsfiddle.net/487r8qza/

HTML

<div id="footer">
    <one id="one">

    </one>
    <two id="two">

    </two>
    <three id="three">

    </three>
</div>

JavaScript

$("#footer").click(function(){
    $("#one").animate({ 
        marginLeft: "+=900px",
    }, 2000 );
    $("#two").animate({ 
        marginLeft: "+=900px",
    }, 800 );
    $("#three").animate({ 
        marginLeft: "+=900px",
    }, 333 );
});
$("#three").click(function() {
    $("#three").animate({
        marginLeft:  "100%"} , 1000
    );
});

CSS

#footer {
    margin: 0;
    padding: 0;
    float: left;
    width: 100%;
    max-width: 100%;
    height: 115px;
    background-color: #4a4a4a;
}
one {
    margin: 0;
    padding: 0;
    float: left;
    width: 300px;
    background-color: #070707;
    height: 115px;
    margin-left: -900px;
}
one,two,three {
    text-align: center;
    color: white;
    font-family: "Raleway", Arial, Helvetica, Trebuchet MS, Tahoma, sans-serif;
    font-weight: bold;
    font-size: 16px;
    line-height: 115px;
}
one:hover {
    background: black;
    margin: 0;
    padding: 0;
    width: 300px;
    height: 115px;
    float: left;
    transition: all 0.3s ease-out; 
    cursor: pointer;
}
two:hover {
    background: black;
    margin: 0;
    padding: 0;
    width: 300px;
    height: 115px;
    float: left; 
    transition: all 0.3s ease-out;
    cursor: pointer;
}
three:hover {
    background: black;
    margin: 0;
    padding: 0;
    width: 300px;
    height: 115px;
    float: left; 
    transition: all 0.3s ease-out;
    cursor: pointer;
}
two {
    margin: 0;
    padding: 0;
    float: left;
    width: 300px;
    background-color: #1a1a1a;
    height: 115px;
    margin-left: -900px;
}
three {
    margin: 0;
    padding: 0;
    float: left;
    width: 300px;
    background-color: #2c2c2c;
    height: 115px;
    margin-left: -900px;
}

Answer 1

对不起，如果花了这么长时间，有事发生了。是的，所以我开始工作了。希望这有帮助

JSFIDDLE

至于CSS，我让它尽可能简单。这里的技巧是让您的 DIV 显示内联 block ，这样一开始，它们就整齐地堆叠在一起。您还希望它们都正确 float 。

CSS:

.box-container{
    width: 100%;
    height: 115px;
    position: relative;
    overflow: hidden;   
}

.box-item{
    width: 300px;
    height: 115px;
    position: relative;
    display: inline-block;
    float: right;
    cursor: pointer;
}

.b0{
    background: #7888D9;
}

.b1{
    background: #76D54E;
}

.b2{
    background: #DF7B41;
}

接下来，在您的 HTML 中，您需要为每个 DIV 赋予相同的类名，这将简化 Jquery 的点击事件。最后，我们还将给我们的第一个 DIV 一个类名“current”。这将控制哪个 DIV 必须移动，哪个 DIV 必须等待并保持空闲，只要他旁边的那个没有移动。您很快就会明白。

HTML:

<div class="box-container">
    <div class="box-item b0 current">
        Box 1
    </div>
    <div class="box-item b1">
        Box 2
    </div>
    <div class="box-item b2">
        Box 3
    </div>                  
</div>

最后，关于 Jquery，这是它变得有点复杂的地方，我会尽力解释。请记住，数学并不是我的强项。由于我们的 DIVS 都在 CSS 中 float ，所以它们将全部堆叠到右侧(当然)。为了解决这个问题并将它们放在左边，我们需要给每个 DIV 一个正确的位置。这个位置会有某种偏移。要得到这个数字，我们需要将 DIV 的宽度乘以 DIV 的总数。之后，我们必须将此数字减去 DIV 容器的总宽度(基本上是浏览器宽度)。

对于点击事件，我们必须首先检查我们点击的DIV是否有我们的“当前”类名。如果是，我们移动它，如果不是，我们不移动。最简单的部分是移动它们。通过将 DIV 的右值重置为 0，每个元素都将随着我们的动画事件相应地向右滑动。完成后，我们将“当前”类名切换到下一个 DIV。然后我们增加一个计数器。这将有助于查看是否所有 DIV 都已移动。

一旦所有 DIV 都向右移动，就会有一个 IF 语句检查我们的计数器，看它是否大于我们的 DIV 总数。如果是，则滑动运动反转，所有 DIV 将返回到左侧。同理，如果被点击的元素不是当前DIV，则不会移动。如果是，它将移回左侧。当所有 DIV 都移回默认位置时，ou 计数器将重置，我们的“当前”类名将重新分配给第一个 DIV。

调整大小功能不是最优的，但它可以处理您可能遇到的任何响应问题。它会将所有 DIV 重置到左侧并重新计算偏移量，以便每个 DIV 永远不会滑出屏幕。需要一些工作，但总比没有好。

JQUERY:

var $boxWidth;
var $screenWidth;
var $offsetRight;
var $count = 0;

$(function () {

    $boxWidth = $('.box-item').width();
    $screenWidth = $('.box-container').width();
    $offsetRight = $screenWidth - ($boxWidth*$('.box-item').length);
    $('.box-item').css('right',$offsetRight);


    $('.box-item').click(function(event) {

        if($(this).hasClass('current')){            
            if($count < $('.box-item').length){            
                $(this).animate({ 
                    right: "0px",
                }, 2000, function(){                    
                    $count++;                
                    $(this).removeClass('current');                    

                    if($count < $('.box-item').length){
                        $(this).next().addClass('current');
                    }
                    else{
                        $(this).addClass('current');
                    }                                                      
                });                                                        
            }
            else{
                $(this).animate({ 
                    right: $offsetRight,
                }, 2000, function(){                    
                    $count++;
                    $(this).removeClass('current');

                    console.log($count);
                    if($count < ($('.box-item').length*2)){
                        $(this).prev().addClass('current');
                    }
                    else{
                        $(this).addClass('current');
                        $count = 0;
                    }                                                  
                });                                        
            }
        }        
    });

    window.onresize = myResize;
    myResize();
});

function myResize(){
    $screenWidth = $('.box-container').width();
    $offsetRight = $screenWidth - ($boxWidth*$('.box-item').length);

    $('.box-item').each(function(){
        $(this).css('right',$offsetRight);        
    });

    $('.box-item').eq(0).addClass('current');
    $count = 0;
}