3

嗨，我是 jquery 的新手，我希望你们中的一个更有经验的人可以帮助我。我有一个容器设置为溢出：隐藏，在里面我有 3 个 div，其中两个是隐藏的，因为它们溢出了。我想让 div 在每次单击容器时都按顺序从右侧滑动。我有第二个 div 在点击时出现，但我不能让第三个移动。每次单击容器时，里面的 div 应该移动 100px，但它不会。请向我解释为什么它没有。这是 JS 小提琴链接-> http://jsfiddle.net/FSMMA/

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
    .container{
        width:100px;
    height:100px;
    overflow:hidden;
    position:relative;
}
.one,.two,.three{
    display:inline-block;
    position:relative;
}
    .one{
        width:100px;
        height:100px;
    background-color:green;
}
.two{
    width:100px;
    height:100px;
    background-color:red;
}
.three{
    width:100px;
    height:100px;
    background-color:blue;
}
.boxes{
    width:400px;
}
</style>
</head>

<body>
<script type="text/javascript">
$(document).ready(function(){
    $('.container').click(function(){
        $('.boxes').offset({left :-100})
        });
    });
</script>
<div class="container">
    <div class="boxes">
        <div class="one">
        </div>
        <div class="two">
        </div>
        <div class="three">
        </div>
    </div>
</div>
</body>
</html>
4

4 回答 4

1

你为什么不喜欢 .animate()

$(document).ready(function(){
$('.container').click(function(){
    $('.boxes').animate({"left": "-=100px"}, "slow");
    });
});

并添加这个

.boxes{
width:400px;
position:absolute;
 }

.one,.two,.three{
display:inline-block;
position:relative;
float:left;

}

于 2012-12-11T06:56:06.637 回答
0

你只移动 -100，所以它只移动一个容器，试试下面的代码，它会从之前的值减少 100，所以它移动正常，

$(document).ready(function(){
 $('.container').click(function(){
    $('.boxes').offset({left : $('.boxes').offset().left-100})
    });
});

更新的小提琴：http : //jsfiddle.net/HBHcC/1/

于 2012-12-11T06:12:30.060 回答
0

要添加到提供的答案...以下将给出幻灯片效果：

$(document).ready(function(){

     var pos = 1;

     $('.container').click(function(){

     if(pos < 4) {
         $('.boxes div:nth-child(' + pos + ')').animate({ width: 0 }, 1000);
          pos++;
     }

    });

 });​
于 2012-12-11T06:44:08.550 回答
0

老实说，我不确定您的代码为什么不起作用，但我怀疑有其他人可以提供的纯 CSS 修复。也就是说，我摆弄了 CSS 、 JS和HTML 并让它工作。

在 HTML 中，我在大多数 div中添加了一个box类：

<div class="container">
  <div class="boxes">
    <div class="one box"></div>
    <div class="two box"></div>
    <div class="three box"></div>
  </div>
</div>​

盒子类的添加让我可以稍微整理一下 CSS。这与你的问题无关，但我忍不住。:-) 更重要的是，请注意我让盒子向左浮动。

.container {
    width: 100px;
    height: 100px;
    overflow: hidden;
    position: relative;
}

.box {
    display: inline-block;
    float: left;
    width: 100px;
    height: 100px;
}

.one {
    background-color:green;
}

.two {
    background-color:red;
}

.three {
    background-color:blue;
}

.boxes {
    width:400px;
}​

在我的 JavaScript 中，我正在捕获对单个框的点击，而不是对容器的点击。这使我可以检测我们是否在最后一个框上，因为我假设您不希望那个框滚出屏幕。此外，我没有更改“ boxes ”div的偏移量，而是更改了左边距。最后，我改用 animate 而不是 offset 有两个原因：首先，我不知道如何让 offset 工作。;-) 其次，如果您愿意，您可以为动画添加延迟以创建滑入效果。

$(document).ready(function(){
    $('.box').on("click", function() {
        // Is this the last div, or is there a next one?
        if ($(this).next().length) {            
            var animSpeed = 200;  // Make this 0 for an instant change
            $('.boxes').animate({marginLeft : "-=100"}, animSpeed);
        }        
    });
});

您可以在http://jsfiddle.net/HBHcC/11/进行演示

于 2012-12-11T06:58:13.300 回答