1

我有三个水平的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;
}
4

4 回答 4

3

你可能想做这样的 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();
     })

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

于 2013-04-09T07:31:58.860 回答
0

我已经修复了你的 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

于 2013-04-09T06:54:50.597 回答
0

错别字：

/* 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。

如前所述，如果您想SlideDiv在文档加载时设置更多内容，最好编写：

$(document).ready( function(){
     SlideDiv();
     //add more stuff here
});
于 2013-04-09T07:40:00.813 回答
0

尝试这个;

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

于 2013-04-09T06:49:08.527 回答