Question

这个问题被多次询问，但我有不同的细节。你能不能帮我添加一个动态创建的div？但不同的是我必须创建如下所示的div。

这是Jquery

 var new_div = "<div class='rounded_corner_with_border_and_tag' style='line-height:35px'><span class='span_tags'>Temel Bilgiler</span><br /><br /><div style='float:left;width:130px'>İsim:</div><div style='float:left;width:200px'><input id='Text1' class='blue_input' type='text' /></div><div style='clear:both'></div><div style='float:left;width:130px'>Soyad:</div><div style='float:left;width:200px'><input id='Text2' class='blue_input' type='text' /></div><div style='clear:both'></div><div style='float:left;width:130px'>Ünvan:</div><div style='float:left;width:200px'><input id='Text3' class='blue_input' type='text' /></div><div style='clear:both'></div><div style='float:left;width:130px'>Uzmanlık:</div><div style='float:left;width:200px'><input id='Text4' class='blue_input' type='text' /></div><div style='clear:both'></div><div style='float:left;width:130px'>Cep Numarası:</div><div style='float:left;width:200px'><input id='Text5' class='blue_input' type='text' /></div><div style='clear:both'></div><div style='line-height:6px'>&nbsp;</div><div style='float:right'><input type='button' id='Button2' name='btn_new_photo' value='Güncelle' class='theme05' /></div><div style='clear:both'></div></div>";

我无法创建静态div，所以我必须在上面的javascript中创建div。

这是我简单的jquery代码....

$(document).ready(function () {
        $('#menu_1').click(function () {
            var new_div = "<div class='rounded_corner_with_border_and_tag' style='line-height:35px'><span class='span_tags'>Temel Bilgiler</span><br /><br /><div style='float:left;width:130px'>İsim:</div><div style='float:left;width:200px'><input id='Text1' class='blue_input' type='text' /></div><div style='clear:both'></div><div style='float:left;width:130px'>Soyad:</div><div style='float:left;width:200px'><input id='Text2' class='blue_input' type='text' /></div><div style='clear:both'></div><div style='float:left;width:130px'>Ünvan:</div><div style='float:left;width:200px'><input id='Text3' class='blue_input' type='text' /></div><div style='clear:both'></div><div style='float:left;width:130px'>Uzmanlık:</div><div style='float:left;width:200px'><input id='Text4' class='blue_input' type='text' /></div><div style='clear:both'></div><div style='float:left;width:130px'>Cep Numarası:</div><div style='float:left;width:200px'><input id='Text5' class='blue_input' type='text' /></div><div style='clear:both'></div><div style='line-height:6px'>&nbsp;</div><div style='float:right'><input type='button' id='Button2' name='btn_new_photo' value='Güncelle' class='theme05' /></div><div style='clear:both'></div></div>";

            $('#div_profile_container').append(new_div).fadein();
        });
    });

我需要进行div显示：先没有然后淡入但是无法进行。请帮忙......

Answer 1

在.hide()

之后添加.append(new_div)

$('#div_profile_container').append(new_div).hide().fadeIn();

此外，正如爆炸丸所述，该方法为fadeIn（大写字母I），而不是fadein。

或者，您可以简单地更改样式声明并将其设为style='line-height:35px; display: none;'

Answer 2

我总是使用的方法（而不是首先使用.hide（））是在构建元素时简单地将“display”属性标记为“none”。例如：

<div class='rounded_corner_with_border_and_tag' style='line-height:35px; display:none;'>

Answer 3

我终于做到了。谢谢你的帮助。我给了div一个id并隐藏了

var new_div = "<br /><div id='div_menu_1' class='rounded_corner_with_border_and_tag' style='line-height:35px;display:none'>"

然后，我将它附加到div并使其在下面用jquery淡化

$('#div_profile_container').append(new_div);
$('#div_menu_1').fadeIn();

jquery fadein是一个在飞行中创建的div

3 个答案: