Question

在此代码中：http://jsfiddle.net/GeAwB/，我想使用jquery show（“slow”）为最后添加的内容设置动画。

我将新内容放在div new_div中：

<div id="new_div" ></div>

并将其添加到主div“shanon”-div：

中

         <div id="shanon" style="height: 300px;"></div>

问题是，整个主要的div“shanon”-div将被动画化，我只希望最后添加的行被动画化。

任何想法？

Answer 1

试试这个......

http://jsfiddle.net/GeAwB/6/

你应该用我的例子中的元素包装每一行，我用a包裹每一行 div

然后在你的javascript中..找到最后一个div元素。然后给它动画....

$("#shanon").append($("#new_div").html()).find("div").last().hide().show("slow");

Answer 2

这是另一种可能不会影响行间距的可能性：http://jsfiddle.net/GeAwB/18/

Answer 3

每次单击该按钮时，都会创建一个新的div，而不是尝试重用<div id="new_div"></div>

代码将大大简化并且变得更容易理解

$(document).ready(function() {
    var $new_div, $shanon = $("#shanon"),
        $weiter = $("#weiter"),
        $zeile = $(".zeile");
    $weiter.removeAttr("disabled").click(function() {
        if (i < array.length) {
            if (i > 0) {
                $zeile.removeClass("zeile");
            }
            $new_div = $("<div/>").html(array[i]).hide().appendTo($shanon).show("slow");
            i = i + 1;
        }
        else {
            $zeile.removeClass("zeile");
            $weiter.attr("disabled", "disabled");

        }
    });
});

请参阅update of fiddle

编辑：删除zeile类不太对。 $('.zeile')需要放回点击处理程序中。我不打算做这个改变，因为另一个答案已被接受，虽然效率很低。

仅显示带有show的附加文本（“slow”）

3 个答案: