jQuery/HTML - 水平滚动

发布于 2024-12-03 15:57:03 字数 192 浏览 0 评论 0原文

我在滚动时遇到问题...我想做的是单击一个按钮后，使一个 div 向左滚动，另一个向右滚动/一个出去，第二个进入。但我找不到任何解决方案，我正在强制第二个 div 位于第一个 div 旁边并隐藏它时遇到麻烦...有什么想法吗？

网站

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦里兽 2024-12-10 15:57:03

我已阅读您的问题，这就是我的理解；

您正在尝试使用另一个 div 为一个 div 制作动画，这里是解决方案：

查看小提琴以获取工作示例： http:// /jsfiddle.net/HNY7R/

HTML

<div id="container">
    <div class="main"></div>
    <div class="second"></div>
</div>

<input type="button" id="push" value="push me" />

CSS

#container
{ width: 400px; height: 200px; position: relative; border:1px solid black; overflow: hidden; }

.main
{ width: 400px; height: 200px; position: absolute; left: 0; top: 0; background: green; }

.second
{ width: 400px; height: 200px; position: absolute; left: 400px; top: 0; background: red; }

jQuery

$('#push').click(function(){

        var main = $('.main').css('left');
        var second = $('.second').css('left');

        if(main == '-400px'){
            $('.second').animate({ 'left' : '400px' }, 500);
            $('.main').animate({ 'left' : '0px' }, 500);
        } else {
            $('.second').animate({ 'left' : '0px' }, 500);
            $('.main').animate({ 'left' : '-400px' }, 500);
        }


    });

I have read your question and this is what i have understood;

You are trying to animate a div with another div, and here is the solution:

View the fiddle for a working example: http://jsfiddle.net/HNY7R/

HTML

<div id="container">
    <div class="main"></div>
    <div class="second"></div>
</div>

<input type="button" id="push" value="push me" />

CSS

#container
{ width: 400px; height: 200px; position: relative; border:1px solid black; overflow: hidden; }

.main
{ width: 400px; height: 200px; position: absolute; left: 0; top: 0; background: green; }

.second
{ width: 400px; height: 200px; position: absolute; left: 400px; top: 0; background: red; }

jQuery

$('#push').click(function(){

        var main = $('.main').css('left');
        var second = $('.second').css('left');

        if(main == '-400px'){
            $('.second').animate({ 'left' : '400px' }, 500);
            $('.main').animate({ 'left' : '0px' }, 500);
        } else {
            $('.second').animate({ 'left' : '0px' }, 500);
            $('.main').animate({ 'left' : '-400px' }, 500);
        }


    });

回复收藏 0 原文

~没有更多了~