单击时隐藏和显示 div，带有绝对位置的动画，并在隐藏时将其删除

Posted 2023-05-08

【中文标题】单击时隐藏和显示 div，带有绝对位置的动画，并在隐藏时将其删除

【英文标题】：Hide and show divs on click with animation of absolute position & remove them on hide

【发布时间】：2012-04-29 12:38:04

【问题描述】：

我想：

单击“NEW”按钮将新的 DIV 添加到“CONTAINER”中 - 效果很好

单击“MOVE”按钮 - 获取 $array - 然后将容器移动到合适的位置 - 然后为 $array 中的每个项目在“CONTAINER”中添加新的“DIV” - 然后将“CONTAINER”动画化到“左侧” : 0" - 这不起作用

点击“REMOVE”按钮 - 将“CONTAINER”动画到屏幕外，并从“CONTAINER”中删除所有 DIV

JsFiddle Example

为什么它在 web 上不起作用？

html

<div class="panel">
    <button class='new'> + </button>
    <button class='move'> &gt; </button>
    <button class='remove'> &lt; </button>
</div>
<div class="container">
</div>

CSS

.block 
   margin       : 0px;
   width        : 200px;
   display      : inline-block;
   border-right : thin dashed #aaa;
   opacity      : 0;

.head 
   margin : 0px;
   padding: 5px;
   height : 30px;
   background-color: red;
   color  : white;

.body 
   margin : 0px;
   padding: 5px;
   height : 190px;
   background-color: #ddd;
   color  : black;

.panel 
   position  : absolute;
   top       : 50px;
   padding   : 5px;
   color     : #FFF;
   font-size : 15px;
   background: #d30;
   height    : 25px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
   cursor    : pointer;

.container 
   position: absolute;
   top  : 90px;
   left : 0px;

button
   width   : 25px;
   background  : none;
   cursor      : pointer;
   font-family : 'voltaeftu-regular',Times New Roman;
   font-size   : 18px;
   color   : #fff;
   border  : none;
   margin  : 0px;
   padding : 0px;

jQuery:

$(".remove").click(function()
    var x_width = $('.container').find('.block').width();
    var x_all = $('.container').find('.block').size();
    var all_width = -10 - ( x_width * x_all ) ;
    $(".container").animate(
        left: all_width
    , 500 );
 );

$(".new").click(function()  
       $('.container').append( $('<div class="block" id="new"><div class="head">HEADER</div><div class="body">text text text</div></div>', 
           css: 
               display: 'inline-block',
               opacity: 0
           
       ).animate( opacity: 1  ) );
);

// array
var $array = [ '001', '002', '003', '004', '005' ];

$(".move").click(function()
   var array_length = $array.length;
   var array_width = 0 - array_length * 200;
   $('.container').css ( left: array_width);
   $.each( $array , function(item, value)
               $('.container').apped('<div class="block" id="'+value+'"><div  class="head">HEADER '+value+'</div><div class="body">text text  text</div></div>', 
                       css: 
                           display: 'inline-block',
                           opacity: 0
                           
                   ).animate( opacity: 1  );
           );
    $('.container').animate( left: 0);
);

【问题讨论】：

语法错误$('.container').apped('。应用了？？

是的，谢谢... 新示例 >>> jsfiddle.net/ynternet/vykV9/2

【参考方案1】：

您遇到的一个问题是在将原始块移动到 left:0 时没有计算原始块的宽度，这是一个修复：

var block_width = $(".block").width();
var array_width = (array_length * block_width) - block_width;
$('.container').css ( left: array_width);

之前，您将它移动到其自身宽度 * 数组的长度上，这意味着它被推离了屏幕，因为它已经存在的宽度没有被计算在内。

但在我解决了这个问题之后，这些 div 就有点堆积起来了。我假设您希望它们水平排列？

【讨论】：

我需要计算容器的宽度和行数，因为我不知道访客屏幕的宽度......所以我不知道“容器”有多少行...... :]

是的，但是如果你计算块的宽度，它总是会离开屏幕那么多。你需要减去它的宽度，这样它就有了自己的空间。

【参考方案2】：

每当我使用 javascript 时，声明 DOM 对象和事件处理程序的顺序很重要。在您的网络示例（第 5 号）中，您的 jquery 事件处理（单击等）是在使用 HTML 创建这些 DOM 对象之前设置的。尝试将您的 js 脚本移动到页面底部的 end body 标记之前。

【参考方案3】：

您应该在 $(document).ready() 函数中包含所有这些 javascript：

$(document).ready(function() 
   // put all your jQuery goodness in here.
 );