jsFiddle

Question

jsFiddle

我正在尝试slideDown <span>元素内的div

<div id='delete'>
    <form id='fform'> 
        <span class='front15'>Enter your name </span>

        <input type='text' id='tf' placeholder='name' />
        <input type='submit' id='get_button' value='Get' text='Get'>
    </form>
</div>

JS：

 $('body').on('submit', '#fform', function () {
     $('#delete').html("<span class='front'>Processing...</span>").slideDown('slow');
     // ajax call
     return false;
 });

新范围似乎不是slideDown，它只显示直线而没有效果

有什么问题？

修改正如问题标题所示：'..带文字'没有一个答案可以解决这一点。你能不能让文本用div滑动（就像我们在垂直选框中看到的那样）

这就是我想要的：感谢adeneo

Fiddle

Answer 1

将元素添加为隐藏，然后将其向下滑动：

$('body').on('submit','#fform',function(){ 
     var div = $('<div />', {'class': 'front', 
                                text  :'Processing...', 
                                style :'display:none;'
                              }
                );
     $('#delete').html( div );
     div.slideDown('slow');
     return false;
 });

FIDDLE

并且slideDown()有时会出现内嵌元素未正确放置的问题，因此请使用块元素。

Answer 2

新div在显示的状态下创建，因此可以在页面上立即显示。

如果您将其隐藏起来，则可以将其向下滑动：

$('#delete').html("<span class='front'>Processing...</span>").hide().slideDown('slow');

http://jsfiddle.net/ua2GM/

Answer 3

因为它已经可见而没有滑落的原因。首先尝试隐藏它然后向下滑动：

$('#delete').html("<span class='front'>Processing...</span>").hide().slideDown('slow');

演示：http://jsfiddle.net/9SsUN/2/

Answer 4

只需用您正在执行的元素替换#delete的内容即可立即显示该元素。此外，您可能希望稍后访问该表单，因此最好隐藏它。

这是一个轻微的重组，可以实现您想要的slideDown，并且只隐藏表单，以便您稍后再次显示它。

请参阅此jsfiddle：http://jsfiddle.net/z2gYZ/

SlideDown对带文本的div的影响

jsFiddle

Fiddle

4 个答案: