Question

我有问题。我创建了两个块，其中一个块最初是不可见的。当我点击链接时 - 隐藏的块平滑地出现在右侧，推动左主块。但是，当我点击第二个链接，即将所有内容都归还时，动画无法正常工作。我需要那个动画））

我的HTML

<div class="content"><a href="#" class="click">CLICK</a></div>
<div class="hidden-content"><a href="#" class="undo-click">UNDO</a></div>

我的css

body, html {
height: 100%;
margin: 0;
padding: 0;
}

a {
display: block;
margin-bottom: 20px;
color: #fff;
}

.content {
transition: all .5s ease;
left: 0;
width: 100%;
height: 100%;
top: 0;
background: red;
}

.hidden-content {
width: 0px;
height: 100%;
position: absolute;
right: -300px;
visibility: hidden;
opacity: 0;
transition: right .5s ease;
overflow-y: auto;
overflow-x: hidden;
background: blue;
}

和js

$('.click').click(function(){
$(".content").css('position', 'fixed');
$(".content").css('left', '-300px');
$(".hidden-content").css('visibility', 'visible');
$(".hidden-content").css('opacity', '1');
$(".hidden-content").css('right', '0px');
$(".hidden-content").css('width', '300px');
});

$('.undo-click').click(function(){
$(".content").css('position', 'static');
$(".content").css('left', '0px');
$(".hidden-content").css('visibility', 'hidden');
$(".hidden-content").css('opacity', '0');
$(".hidden-content").css('right', '-300px');
$(".hidden-content").css('width', '0px');
});

我可能需要jQuery动画吗？谢谢你的帮助！

JsFiddle DEMO

Answer 1

如果从撤消处理程序中删除$(".content").css('position', 'static');，那么它应该可以正常工作。

Answer 2

我建议你不要使用jQuery来添加CSS属性。而是使用jQuery中的toggleClass添加和删除具有CSS属性的类：

$('.click').click(function(){
     $(".content").toggleClass('hide');
    $(".hidden-content").toggleClass('show');
});

$('.undo-click').click(function(){
    $(".hidden-content").toggleClass('show');
    $(".content").toggleClass('hide');
});

这样你就不需要使用如此多的jQuery行，并且为了让动画正常工作你错过了top：0;在CSS中进入隐藏内容类。

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x:hidden;
}

a {
    display: block;
    margin-bottom: 20px;
    color: #fff;
}

.content{
    transition: left .5s ease;
    left: 0;
    width: 100%;
    height: 100%;
    top: 0;
    background: red;
}

.content.hide{
    transition: left .5s ease;
    position:absolute;
    left: -300px;
    width: 100%;
    height: 100%;
    top: 0;
    background: red;
}

.hidden-content {
    width: 300px;
    height: 100%;
    position: absolute;
    top: 0;
    right: -300px;
    transition: all .5s ease;
    background: blue;
}

.hidden-content.show{
    width: 300px;
    height: 100%;
    top: 0;
    right: 0;
    transition: all .5s ease;
    background: blue;
}

此外，当你移动一个绝对定位的容器时，你真的不需要隐藏它或改变它的宽度，因为你将它从视口移开，你可以保持宽度和不透明度相同但仅依赖于位置，编辑它的左，右，上，下位置。

DEMO http://jsfiddle.net/q283G/7/

Answer 3

这是一个有效的小提琴，我注释掉了一些代码，并为内容设置了z-index，使其始终显示在最佳位置。

$('.undo-click').click(function(){
$(".content").css('position', 'fixed');
$(".content").css('left', '0px');
   $(".hidden-content").css('position', "fixed");
//    $(".hidden-content").css('visibility', 'hidden');
//$(".hidden-content").css('opacity', '0');
$(".hidden-content").css('right', '-300px');
// $(".hidden-content").css('width', '0px');
});

http://jsfiddle.net/q283G/3/

Answer 4

这是更好的方式而不更改以前的标记：http://jsfiddle.net/q283G/8/

$('.click').click(function(){
    $('.content').css('position','fixed');
    $('.content').animate({left:'-300px'},500);
    $('.hidden-content').animate({marginLeft:'-300px'},500);
});

$('.undo-click').click(function(){
    $('.content').animate({left:'0px'},500);
    $('.hidden-content').animate({marginLeft:'0px'},500);
    setTimeout(function(){
        $('.content').css('position','static');
    },500);
});

Answer 5

试试这个......

创建新的css文件（新内容和新隐藏内容）

content
{
       ........
}

newcontent //example implementation
{
    position: absolute;
    left: -300px;
    transition: all .5s ease;
    width: 100%;
    height: 100%;
    top: 0;
    background: blue;
}
new-hidden-content
{
   .........
}

并为每个项目设置新类：

    document.getElementById("#").className = "newcontent";

OR：

 document.getElementsByClassName(".content").................

和：
这种方式比你的js实现更好。

Css过渡问题与改变＆＃34;风格＆＃34;用jQuery

5 个答案: