7

是否可以在使用 jQuery 隐藏某些元素后使用 css3 转换为元素移动动画.fadeOut()？

我在这里找到了某种解决方案（请参阅“它也适用于网格”部分）：

但是我的情况更像这样：http: //jsfiddle.net/CUzNx/5/

<div class="container">
    <div id="item1" class="item">Test1</div>
    <div id="item2" class="item">Test2</div>
    <div id="item3" class="item">Test3</div>
    <div id="item4" class="item">Test4</div>
    <div id="item5" class="item">Test5</div>
    <div id="item6" class="item">Test6</div>
    <div id="item7" class="item">Test7</div>
</div>

<div style="clear:both">
<button onclick="$('#item1').fadeOut();">
   Hide first
</button>
<button onclick="$('#item1').fadeIn();">
   Show first
</button>
</div>

我有浮动 div 元素，在隐藏某些元素后，如果其他元素被动画化会很好。可能吗？

4

3 回答 3

9

你可以做这样的事情，它使用一个由一点 JavaScript 和 CSS 转换切换的 CSS 类来做你正在寻找的东西，而不是使用 jQuery。

// The relevant CSS
.item {
    // Your original code here
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}
.hide {
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0;
    padding: 0;
}

// The JavaScript
var items = document.getElementsByClassName('item');
for(var i = 0; i < items.length; i ++) {
    items[i].onclick = function() {
        this.classList.toggle('hide');
    }
};

function addBack() {
    for(var i = 0; i < items.length; i ++) {
        items[i].classList.remove('hide');
    }
}

我还取出了您的按钮并添加了一个“添加所有元素”按钮：

<button onclick='addBack()'>Add all elements back</button>

如果您已经在项目的其他地方使用 jQuery，我也制作了这个 jQuery 版本。这是用于此的 JavaScript：

function addBack() {
    $('.item').each(function() {
        $(this).removeClass('hide');
    });
}

$('.item').on('click', function() {
    $(this).toggleClass('hide');
});

此外，您不需要任何身份证件，因此如果您愿意，可以将其取出。

于 2013-08-21T19:58:32.423 回答
0

一种方法是将要删除的 div 替换为占位符，然后为占位符和原始内容设置动画。

使用这个片段：使用 jQuery 将一个元素定位在另一个元素之上

您的代码可以更改为这样的内容（我使用单击该项目在此处触发删除）：

演示

CSS

div { box-sizing: border-box; }

.item, .placeholder {
    float: left;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    margin: 5px;
    position: relative;
    background: white;
    -webkit-transition: all 1s ease;
}

.placeholder {
    opacity: 0;
    border: 0px;
}

.item.hide {
    border: 1px solid rgba(0,0,0,0);
    margin: 0px;
    top: 500px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
}

.placeholder.hide {
    width: 0;
    height: 0;
    margin: 0;
    border: 0;
}

脚本

$('.item').on('click', function(evt) {
    var $this = $(this);
    var $new  = $($this.clone());

    $new.addClass('placeholder');
    $this.replaceWith($new);

    $this.positionOn($new);
    $this.appendTo($('body'));

    setTimeout(function() {
        $this.css({top: '', left: ''});
        $this.addClass('hide');
        $new.addClass('hide');  
    }, 0);
});

片段来自： 使用 jQuery 将一个元素定位在另一个元素上

// Reference: http://snippets.aktagon.com/snippets/310-positioning-an-element-over-another-element-with-jquery
$.fn.positionOn = function(element, align) {
  return this.each(function() {
    var target   = $(this);
    var position = element.position();

    var x      = position.left; 
    var y      = position.top;

    if(align == 'right') {
      x -= (target.outerWidth() - element.outerWidth());
    } else if(align == 'center') {
      x -= target.outerWidth() / 2 - element.outerWidth() / 2;
    }

    target.css({
      position: 'absolute',
      zIndex:   5000,
      top:      y, 
      left:     x
    });
  });
};

现在，当网格崩溃时，您的旧 div 会以动画方式消失。

如果您愿意在代码中添加另一个库，请查看Metafizzy 的 Masonry/Isotope。他们被设计来做这种事情。

于 2013-08-21T21:00:36.530 回答
0

你不需要 CSS 转换。只需使用.hide()而不是.fadeout()

<button onclick="$('#item1').hide(400);">
    Hide first
</button>

见这里：https ://jsfiddle.net/st1o8ngp/

于 2016-01-25T12:48:45.333 回答