Question

我有三个div部分，我想要的是在一段时间间隔之后，最左边的div被删除，并且从最右边方向添加一个新的div

这是在外部div中有3个div部分的html文件

HTML

<div id="sub-category">
  <div id="sub-category1">
  </div>
  <div id="sub-category2">
  </div>
  <div id="sub-category3">
  </div>
</div>

在jquery中每隔5秒SlideDivSection（）后的5秒的时间间隔。现在它删除第一个div并移动，但它没有在右边添加新的div。

Jquery

 function SlideDiv(){
        setInterval(function(){SlideDivSection()}, 5000);
 }

 function SlideDivSection(){            
     $("#sub-category1").slideUp();    
     $("#sub-category1").remove();    
     $("#sub-category2").attr('id',"sub-category1");//setting the id of sub-cateogry2 to sub category1

     $("#sub-category2").attr("id","sub-category2");//setting the id of sub-cateogry3 to sub category2


// now adding a new div    
     $("#sub-cateogry").append("<div id='#sub-cateogry3'></div>");
//giving slidedown effect to newly created div
     $("#sub-cateogry3").slideUp();
   }

    $("document").ready(SlideDiv);

CSS

#sub-category {
    border:solid 0px black;
    width:686px;
    height:275px;
    position: relative;
    margin:5px;
}
#sub-category1 {
    border:solid 1px black;
    width:223px;
    height:293px;
    position: relative;
    float:left;
    background-color:grey;
}
#sub-category2 {
    border:solid 1px black;
    width:223px;
    height:293px;
    position: relative;
    margin-left: 5px;
    float:left;
    background-color:lightskyblue;
}
#sub-category3 {
    border:solid 1px black;
    width:222px;
    height:293px;
    position: relative;
    float:right;
    background-color:lightgreen;
}

Answer 1

您可能希望执行类似jsfiddle

的操作

标记

<div id="sub-category">
    <div id="sub-category1" class="item">Item 1</div>
    <div id="sub-category2" class="item">Item 2</div>
    <div id="sub-category3" class="item">Item 3</div>
</div>

CSS

    #sub-category{
        border: 0 solid black;
        height: 295px;
        margin: 5px 300px;
        overflow: hidden;
        position: relative;
        width: 675px;
     }
     .item{
        position: absolute;
        left:0;
        top: 0;
        width: 223px;
        height: 293px;
        border: solid 1px black;
        background: #046380;
        font: 44px/262px georgia;
        text-align: center;
        font-style: italic
     }
     #sub-category1{
        background-color: grey;
     }
     #sub-category2{
        background-color: #ffc; left: 225px;
     }
     #sub-category3{
        left: 450px;
        background-color: lightgreen;
     }

和javascript

    function SlideDivSection() {
        var items = ['sub-category1', 'sub-category2', 'sub-category3'];
        var container = $('#sub-category')
        var item_width = 225;

        window.setInterval(function () {

           var first = $('.item:first', container);
           var faux_id = first.attr('id') + 'faux';
           var faux_elem = $($('<div/>').append(first.clone()).html()).attr('id', faux_id).css({
              left: item_width * items.length,
              backgroundColor: first.css('background-color')
           })
           container.append(faux_elem);
           faux_elem = $('#' + faux_id, container);

           $('.item', container).animate({
              left: '-=' + item_width
           }, 500, function () {
              first.remove();
              faux_elem.attr('id', faux_elem.attr('id').replace('faux', ''))
           })
        }, 2000)
     }

     $(function(){
        SlideDivSection();
     })

此解决方案从一端删除项目并从另一端再次插入。所以你最终无缝地循环你的初始元素。删除元素后，可以将此行为更改为“添加新（且不同）元素”。

Answer 2

试试这个;

JSfiddle

<强> HTML

/* Same as your original */

<强> CSS

/* Same as your original */

<强>的JavaScript

'use strict';

$(document).ready(function() {
    setInterval(function() {
        $('#sub-category3').remove();

        $('#sub-category1').attr('id', 'sub-category2');
        $('#sub-category2').attr('id', 'sub-category3');

        $('#sub-category').prepend('<div id="sub-category1"></div>');
    }, 2000);
});

注意;你不会看到视觉上的变化，除非你把内容放在DIV中，因为风格也会被传递;）所以它不是“不工作”，因为你什么也看不见：P

Answer 3

我修复了你的javascript，有一些小错误，但现在似乎工作正常。

更新了jquery：

$(document).ready(function() {

    setInterval(function(){SlideDivSection()}, 5000);

 function SlideDivSection(){            

    //fade out and remove div1
    $("#sub-category1").fadeOut(1000, function(){$(this).remove();});   

    $("#sub-category2").attr('id',"sub-category1").html('1');//setting the id of sub-cateogry2 to sub category1    
    $("#sub-category3").attr("id","sub-category2").html('2');//setting the id of sub-cateogry3 to sub category2

    //create new div
    var newDiv = '<div id="sub-category3" style="display:none;">asdas</div>';

    //add new div and fade in    
    $("#sub-category").append(newDiv);
    $("#sub-category3").fadeIn(400);
}

});

通过使用链接，您可以使用一行代码删除div并隐藏它们。通过使用slideUp的回调将确保仅在上滑动画完成后删除div ..

$("#sub-category1").slideUp(1000, function(){$(this).remove();});

这是一个有效的JSfiddle - http://jsfiddle.net/EmxnF/4

Answer 4

错别字：

/* you wrote : */ $("#sub-category2").attr("id","sub-category2");
/* should be : */ $("#sub-category3").attr("id","sub-category2");

/* you wrote : */ $("#sub-cateogry").append("<div id='#sub-cateogry3'></div>");
/* should be : */ $("#sub-category").append("<div id='sub-category3'></div>");

/* you wrote : */ $("#sub-cateogry3").slideUp();
/* should be : */ $("#sub-category3").slideUp();

更正此问题会使您的代码生效（效果除外）：jsfiddle。

如果要查看第一个div slideUp，则必须等待动画结束才能调用$('#div-subcategory1').remove()。你应该在slideUp上使用回调。

如果要为插入的div设置动画，则应将其隐藏，然后使用slideToggle。

 $("#sub-category1").slideUp(function(){
     $("#sub-category1").remove();
     $("#sub-category2").attr('id',"sub-category1");
     $("#sub-category3").attr("id","sub-category2");

     $("#sub-category").append("<div id='sub-category3' style='display: none'></div>");
     $("#sub-category3").slideToggle();
 });

这是jsfiddle。

如前所述，如果你想在文档加载时设置比juste SlideDiv更多的东西，最好写一下：

$(document).ready( function(){
     SlideDiv();
     //add more stuff here
});

滑动Div从左侧移除第一个并从右侧添加新的

4 个答案:

标记

CSS

和javascript