重复jquery点击激活的动画功能

repeating a jquery click activated animation function

本文关键字：动画 功能 激活 jquery 重复      更新时间：2023-12-07

我在互联网上搜索了一天多，没有任何希望，所以我向您介绍我的问题：

我尝试过使用.thoggle（）和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;
}

如果你对它的目的以及它将如何在网站中实现感兴趣，蓝色（第二个）和绿色（第三个）跨度将用作网站的两半的按钮，当选择了你希望查看的那一半时，按钮会移到一边，以显示那一半的适当内容。一旦到了一边，如果观众选择了另一个按钮，则当前内容将消失，而按钮将移动到浏览器的另一边，一旦到了另一边，就会出现新的（另一半）内容。

如果您在#双击处理程序中写入：，它就会工作

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

在第三个点击处理程序中：

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

你可以在这里测试

主要问题是在css中将div的右属性设置为0的同时，对左属性进行动画处理。

我会这样做：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);
        });
    });

将其添加到您的css animation-iteration-count: infinite;

相关文章：