Question

我有两个班级的Div。的 FIDDLE

HTML

<div class="plug slide-down">   
</div>

此div最初位于页面底部。但是当我点击div时，我添加了单击功能以移除.slide-down并且div移动到顶部。

JS

$('.plug').click(function(){
    $(this).removeClass("slide-down");
});

到目前为止，它工作正常，但是当我点击div时，它会快速移动到顶部。我想用一些滑动效果将这个div移到顶部。我尝试添加CSS转换但不以某种方式工作。我需要做什么才能使这个div从底部移动到顶部并产生一些滑动效果？

任何帮助将不胜感激。

Answer 1

尝试查看jQuery.animate。你可以做类似的事情：

$('.plug').on('click', function() {
    var $this = $(this);
    $this.animate({ top: 0, height: 300 }, function() {
        $this.removeClass('slide-down');
    });
});

Here is the fiddle

Answer 2

而不是bottom: -250px;尝试使用transform:translateY(250px);

演示 - http://jsfiddle.net/victor_007/dusofnct/4/

.slide-down {
    transform:translateY(250px);
    z-index: 999;
    position: fixed;
    right: 0;
    left: 0;
    bottom:0;
}
.plug {
    background:red;
    -webkit-box-shadow: 2px 0px 3px 0px rgba(0, 0, 0, .1);
    -moz-box-shadow: 2px 0px 3px 0px rgba(0, 0, 0, .1);
    box-shadow: 2px 0px 3px 0px rgba(0, 0, 0, .1);
    height:300px;
    transition: all 2s;
}

Answer 3

由于您使用bottom来设置div位置，因此您应该继续使用bottom和jQuery animate：

$('.plug').click(function(){
    $(this).animate({
        'bottom': '170px',
    },1000,function(){
        //$(this).removeClass('slide-down');
    });
});

jsFiddle Demo

Answer 4

使用此代码，它会为top属性设置动画，但您应该更改下滑类：http://jsfiddle.net/dusofnct/6/

CSS：

.slide-down{
    position: fixed;
    top: 90%;
    right: 0;
    left: 0;
    z-index: 999;
}

JS：

$('.slide-down').click(function(){
    $(this).animate({'top':0},1000,function(){
        $(this).removeClass('slide-down');
    });
});

使用单击功能删除类时的CSS过渡效果问题

4 个答案: