使用jQuery的.fadeOut()隐藏一些元素后,是否可以使用
css3过渡动画元素移动?
我找到了某种解决方案here(参见“它也适用于网格”部分):
不过我的情况更像这样:
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元素,并且在隐藏了一些元素之后,如果其他元素被动画化将是很好的.可能吗?
解决方法
你可以做
something like this,它使用一个CSS类来切换一些JavaScript和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,我也制作了this jQuery version.以下是JavaScript:
function addBack() { $('.item').each(function() { $(this).removeClass('hide'); }); } $('.item').on('click',function() { $(this).toggleClass('hide'); });
此外,您不需要任何ID,因此如果您愿意,可以将它们取出.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。