0

我<div>在父容器中有 2 秒，例如；

<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 可能包含一个独特的文本，比如一个数字。数字每次递增。

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

这是小提琴。

4

2 回答 2

0

尝试

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

演示：小提琴

于 2013-08-24T14:48:56.017 回答
0

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

$('#trigger').click(function(){
    $(/*static content*/).animate({"margin-left": "-100px"}, "slow");
    $(/*dynamic content*/).animate({"margin-left": "0px"}, "slow");
});
于 2013-08-24T14:49:20.220 回答