3

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，它只是直接显示没有效果

有什么问题 ？

编辑： 正如问题的标题所说：'..with text' 没有任何答案针对这一点。能否请您使文本与 div 一起滑动（就像我们在垂直选取框中看到的那样）

这就是我想要的：感谢 adeneo

小提琴

4

4 回答 4

2

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

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

小提琴

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

于 2013-03-28T11:22:59.260 回答
0

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

如果将其创建为隐藏，则可以将其向下滑动：

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

http://jsfiddle.net/ua2GM/

于 2013-03-28T11:19:49.290 回答
0

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

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

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

于 2013-03-28T11:20:25.213 回答
0

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

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

看到这个jsfiddle：http: //jsfiddle.net/z2gYZ/

于 2013-03-28T11:20:42.217 回答