Question

嗨，我是jquery的新手，我希望你们中有一位经验丰富的人可以帮助我。我有一个容器设置溢出：隐藏和内部我有3个div，其中两个被隐藏，因为它们溢出。我想让每个div都出现在每次点击容器时从右边滑动。我有第二个div出现在点击，但我不能让第三个移动。每次点击容器时，里面的div应该移动100px，但事实并非如此。请向我解释为什么不这样做。这里是JS小提琴链接 - ＆gt; 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>

Answer 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;

}

Answer 2

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

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

更新时尚：http://jsfiddle.net/HBHcC/1/

Answer 3

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

$(document).ready(function(){

     var pos = 1;

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

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

    });

 });

Answer 4

说实话，我不确定为什么你的代码不起作用，但我怀疑有一个纯CSS修复，其他人可以提供。也就是说，我摆弄了CSS 和 JS 和 HTML并使其正常运行。

在HTML中，我在大多数div中添加了框类：

<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中，我捕获单个框上的点击，而不是容器上的点击。这允许我检测我们是否在最后一个框中，因为我假设你不希望那个滚动屏幕。此外，我没有改变“框”div的偏移，而是改变了左边距。最后，我转而使用animate而不是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/

进行演示

使用jquery点击容器内的div移动（如幻灯片放映）

4 个答案: