Question

我在互联网上搜索了一天以上，没有希望，所以我向你提出了我的问题：

我尝试过使用.toggle（）和if / else语句但是很难实现在下面的JS中实现的window_width，element_width和edge维度。

在下面的代码中 -

我有一个蓝色和绿色的跨度，可以将红色父跨度分别设置为浏览器窗口的边缘，绿色到最右边，蓝色到最左边。现在这个工作正常，直到我尝试重复这个过程。所以说我向左走，然后向右走...我再也不能走了，反之亦然。我的问题是如何让这个动画无限期地工作，这样我就可以在浏览器窗口的左右两边不断切换？

感谢大家提前帮助我。最大的赞赏。干杯

JS -

$(document).ready(function(){
$('#two').click(function(){
window_width = $(document).width();
element_width = $('#one').width();
edge = window_width - element_width;
$('#one').animate({right:edge}, 2000).delay(1000);
});
});
$(document).ready(function(){
$('#three').click(function(){
window_width = $(document).width();
element_width = $('#one').width();
edge = window_width - element_width;
$('#one').animate({left:edge}, 2000).delay(1000);
});
});

HTML -

<span id='one'>&nbsp;    
<span id='two'>&nbsp;</span>
<span id='three'>&nbsp;</span>
</span>

CSS -

#one {
    height:100px;
    width:210px;
    background-color:red;
    position:absolute;
    right:0;
}
#two {
    height:100px;
    width:100px;
    background-color:blue;
    float:left;
}
#three {
    height:100px;
    width:100px;
    background-color:green;
    float:right;
}

如果对它的目的以及它将如何在网站中实现感兴趣 - 蓝色（#two）和绿色（#three）跨度将用作网站两半的按钮，当选择哪一半时你希望查看按钮移开以显示该半部分的相应内容。如果观众选择另一个按钮，则当一侧到达侧面时，当按钮移动到浏览器的另一侧时，当前内容消失，一旦驻留到另一侧，则出现新的（另一半）内容。

Answer 1

将此内容添加到您的css animation-iteration-count: infinite;

Answer 2

如果您在#two点击处理程序中写入它将起作用：

$('#one').animate({right:edge, left:0}, 2000).delay(1000);

并在#three点击处理程序中：

$('#one').animate({left:edge, right:0}, 2000).delay(1000);

您可以对其进行测试here

Answer 3

主要问题是，当您将css中div的正确属性设置为0时，可以为left属性设置动画。

我会这样做：http://jsfiddle.net/58sQA/1/

    #one {
        .... 
        //replace right: 0 with
        left: 200px; //set this to the width of the container minus the width of #one
    }


    $(document).ready(function(){
        $('#two').click(function(){            
            $('#one').animate({            
                left: 0
            }, 2000);
        });
        $('#three').click(function(){        
            $('#one').animate({            
                left: 200 //200 should match the value in css
            }, 2000);
        });
    });

重复jquery点击激活动画功能

3 个答案: