6

我在做什么：

我正在一个有 2 个不同“面”的网站上工作，当您单击左侧时，左侧需要为 100%。如果单击右侧，则右侧必须为 100%。

完成了：

我做了左边和右边。并使用 Jquery 对其进行动画处理。

问题
当您单击左侧 div 时，动画正在运行（仅当我添加绝对位置时才起作用），但是当我尝试为右侧创建相同的动画时；它不工作！我创建了一个 jsFiddle，因此您可以看到当前代码：http: //jsfiddle.net/sh3Rg/

我不能使正确的工作。当你点击右边的 div 时；它需要动画到 100%。就像左边的一样。

代码

您可以在此处查看实时预览和代码：http: //jsfiddle.net/sh3Rg/

HTML：

<div id="left"></div>
<div id="right"></div>

JS：

<script>
$('#left').click(function(){
    $('#left').animate({width:'100%'}, 2500);
});
</script>
<script>
$('#right').click(function(){
    $('#right').animate({width:'100%'}, 2500);
});
</script>

CSS：

html,body {
    padding:0;
    margin:0;
    height:100%;
    min-height:100%;
    background-color: #000000;
}
p { 
    cursor: pointer;
    color: #FFF;
}
#left {
    width: 50%;
    height: 100%;
    background: #666;
    float: left;
    cursor: pointer;
    position: absolute;
}
#right {
    width: 50%;
    height: 100%;
    background: #063;
    float: right;
    cursor: pointer;    
}

希望有人可以帮助我。问候，米兰

PS：如果我在这个话题上发布/做错了什么；对不起，这是我的第一个问题。

4

6 回答 6

3

我做了一个小工作。我已经编辑了你的小提琴请检查它。

http://jsfiddle.net/sh3Rg/4/

$('#left').animate({width:'0%'}, 2500);
$('#right').animate({width:'100%'}, 2500);

希望代码对您来说很清楚。如有任何疑问，请随时联系。

于 2013-06-04T11:59:12.720 回答
1

问题是#right增长到 100%，但它在#left

您应该#right使用除static.

所以魔法是：

  • 使用绝对或固定定位
  • 单击时，z-index将活动元素的 更改为大于z-index其他元素的

 

#left, #right {
    width: 50%;
    height: 100%;
    cursor: pointer;
    position: absolute;
}
#left {
    left:0;
    background: #666;
}
#right {
    background: #063;
    right: 0;
}

和脚本：

var Z = 0;
$('#left').click(function(){
    $('#left').css('z-index',Z++).animate({width:'100%'}, 2500);
});




$('#right').click(function(){
    $('#right').css('z-index',Z++).animate({width:'100%'}, 2500);
});

请参阅工作示例：http: //jsfiddle.net/sh3Rg/19/

于 2013-06-04T11:59:07.223 回答
1

LIVE DEMO

HTML: (添加一个特定的类:)

<div id="left" class="toggWidth"></div>
<div id="right" class="toggWidth"></div>

问：

$('.toggWidth').click(function(){
    $(this).stop().animate({width:'100%'}, 2500)
           .siblings('.toggWidth').stop().animate({width:'0%'}, 2500);
});
于 2013-06-04T11:59:13.673 回答
1

接受的答案是正确的。但是你为什么要这样做width:100%？当我单击一个 div 时，它得到了 100%，然后我无法回到以前的状态。我试过了width:95%

你可以看看这里：http: //jsfiddle.net/sh3Rg/24/

于 2013-06-04T12:23:45.377 回答
0

你的问题是左边的 div 在右边设置为 50%，所以它具有优势。

就像将左侧设置为 50% 和右侧设置为 100% 一样，就像您将两者都设置为 50%

于 2013-06-04T12:01:04.383 回答
0

而不是乱用widthand height，你可以用定位来做这一切。

您的示例中缺少的部分是z-index，因为一个 div 正在另一个下方消失。

这是我的工作示例。

HTML：

<div id="left"></div>
<div id="right"></div>

CSS：

div {
    cursor: pointer;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 0;
}
#left {
    background: #666;
    left: 0;
    right: 50%;
}
#right {
    background: #063;
    right: 0;
    left: 50%;
}

jQuery：

$('div').click(function () {
    $(this).css('z-index', 1);
    if (this.id === 'right') {
        $(this).animate({left: 0}, 2500);
    } else {
        $(this).animate({right: 0}, 2500);
    }
});
于 2013-06-04T12:19:53.817 回答