9

我有一个容器，它的工作方式类似于 mac os 中的通知 - 元素被添加到队列中，并在特定超时后被删除。这很好用，但有一个不和谐的视觉副作用。

当它们从 DOM 中移除时，UI 会出现锯齿状更新，因为堆栈中的下一个元素会填充由前一个元素创建的空白。我希望堆栈中的下面的元素平稳地向上移动到该空间，理想情况下使用 css3，但是当它的兄弟被删除时transition: all 0.5s ease-in-out，向.notice类添加 a 对对象没有影响。

最小的 JS 交互：

$('#add').click(function(e) {
    e.preventDefault();
    $('#container').append('<p class="notice">Notice #</p>');
});

$('body').on('click','p.notice', function(e) {
    $(this).fadeOut();
});

更好的是在这里摆弄：

http://jsfiddle.net/kMxqj/

我正在使用 MVC 框架对这些对象进行数据绑定，因此一些原生 css / jQuery 优于 Jq 插件。

4

5 回答 5

17

这应该会删除具有淡出效果的单击元素，然后将下面的所有内容平滑地向上移动。这将适用于堆栈中的任何noticediv，无论它在堆栈中的位置如何。

尝试：

$('body').on('click','p.notice', function(e) {
    $(this).fadeOut(500,function(){
        $(this).css({"visibility":"hidden",display:'block'}).slideUp();
    });
});

在这里提琴

2018 年 8 月 7 日更新：

正如一位用户询问有关使用纯 JS 执行 slideUp 功能的问题，我整理了一个使用requestAnimationFrame为元素的高度设置动画的快速演示。小提琴可以在这里找到。

于 2013-03-12T16:34:16.067 回答
1

jQuery 的 Animate() 方法是一个很好的学习工具，因为您不仅可以淡入淡出对象，还可以同时移动它们。

CSS：

.notice {
    position:relative;
    top:20px;
    width: 100%;
    height: 50px;
    background-color: #ccc;
    opacity:0;
}

jQuery：

$('#add').click(function(e) {
    e.preventDefault();
    $('#container').append('<p class="notice">Notice #</p>');
    $('.notice').animate({opacity: 1, top:0}, 1000);
});

$('body').on('click','p.notice', function(e) {
    $(this).fadeOut();
});

还有我的jsFiddle 演示

于 2013-03-12T16:30:24.647 回答
0

一个简单的方法是为高度和边距属性设置动画 - http://jsfiddle.net/kMxqj/14/

$('#add').click(function(e) {
    e.preventDefault();
    $('#container').append('<p class="notice">Notice #</p>');
});

$('body').on('click','p.notice', function(e) {
    $(this).animate({'height':0,'margin':'0'});
    $(this).fadeOut();
});

这会将高度和边距设置为 0，同时淡出对象，从而实现平滑过渡。还将溢出隐藏到您的通知框，以便在动画发生时覆盖内部的任何内容。

于 2013-03-12T16:29:36.093 回答
0

这个小提琴怎么样

CSS

.notice {
    width: 0;
    height: 0;
    background-color: #ccc;
}

JS

$('#add').click(function(e) {
    e.preventDefault();
    $('#container').append('<p class="notice">Notice #</p>');
    $('#container p.notice:last-child').animate({
        width: 100%,
        height: 50px
    });
});

$('body').on('click','p.notice', function(e) {
    $(this).fadeOut();
});

根据需要调整值，但是这样的事情应该可以完成您想要的 - 听起来 animate() 可能是您想要的

于 2013-03-12T16:31:09.370 回答
0

没有 JQuery：

最好的方法是max-width：

HTML

<div id="wrapper">        
    <div class="myspan">
        child
    </div> 
    <div id="removable" class="myspan">
        removable child
    </div>        
    <div class="myspan">
        child
    </div> 
    <div class="">
        child
    </div>
</div>

CSS

.myspan {
    display: inline-block;
    font-size: 30px;
    display: inline-block;
    max-width: 200px;
    transition: all 1s;
    overflow: hidden;
}
.myspan:hover {
    max-width: 0;
}
于 2017-03-21T22:39:36.507 回答