使用绝对位置和动画的动画在点击时隐藏和显示div。在hide上删除它们

时间:2012-04-18 06:01:44

标签: jquery css position jquery-animate css-position

我想:

  1. 点击“新建”按钮将新DIV添加到“容器”中 - 这样可以正常工作

  2. 点击“移动”按钮 - 取$ array - 然后将容器移到好位置 - 然后为$ array中的每个项目在“CONTAINER”中添加新的'DIV' - 然后将“CONTAINER”动画为左:0“ - 这不起作用

  3. 点击“删除”按钮 - 在屏幕外设置“容器”动画,并从“容器”中删除所有DIV

  4. JsFiddle Example

  5. 为什么它不适用于web

  6. 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});
    });
    

3 个答案:

答案 0 :(得分:1)

您遇到的一个问题是,在将原始广告素材移至left:0时,您没有计算原始广告素材的宽度,这是一个修复:

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

之前,你正在移动它自身的宽度*数组的长度,这意味着它已被推离屏幕,因为它已经存在已经存在的宽度。

但是在我解决之后,div只是堆积起来了。我假设你想要他们排成水平?

答案 1 :(得分:1)

每当我完成javascript时,您声明DOM对象和事件处理程序的顺序很重要。在您的Web示例中(在数字5上),在使用HTML创建这些DOM对象之前,设置了jquery事件处理(单击等)。尝试将js脚本移动到最终正文标记之前的页面底部。

答案 2 :(得分:1)

你应该在$(document).ready()函数中包含所有这些javascripts:

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