Question

我在父容器中有2 <div>个像;

<div class="container">
  <div class="content" style="background-color: #CC0033;">static content</div>
  <div class="content" style="background-color: #FF6600;">dynamic content</div>
</div>

第一个子div（静态内容）包含一些文本。单击触发链接时，它将向左滑动并消失。我使用jquery animate()喜欢;

$("#trigger").click(function(){
  $(".content").animate({ "margin-left": "-100px" }, "slow");
});

当这个滑出时，应该跟着另一个具有相同类的div，使它看起来相同。因此，旧幻灯片将消失，父容器将具有新的div。单击触发器时，此事件可能会继续。或者换句话说，每隔5秒，当前div将向左滑动，然后是新div。 div可能包含一个唯一的文本，比如数字。每次都会增加数字。

我认为包含除文本（内容）之外的所有信息的新内容每次都可以附加，但我不确定这会解决我的问题。这可能吗？

Here 是小提琴。

Answer 1

尝试

jQuery(function($){
    var $ct = $('.container')
    $("#trigger").click(function(){
        $ct.children(".content:first").animate({ "margin-left": "-100px" }, "slow", function(){
            $(this).remove()
        });
    });
})

演示：Fiddle

Answer 2

解决这个问题的方法可能是，当点击#trigger时，点击功能不仅可以修改静态内容的样式，还可以通过更改margin-left将动态内容移动到左侧。它可能看起来像：

$('#trigger').click(function(){
    $(/*static content*/).animate({"margin-left": "-100px"}, "slow");
    $(/*dynamic content*/).animate({"margin-left": "0px"}, "slow");
});

如何滑动儿童潜水消失并替换为新生儿？

2 个答案: