2013-03-28 77 views
3

了slideDown影響

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文本」沒有一個答案解決這一點。能否請您使文本與格(類似於我們在垂直滾動字幕看)滑動

這就是我想要的東西:感謝adeneo

Fiddle

回答

2

添加元素爲隱藏,然後向下滑動:

$('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()有時有沒有正確放置內聯元素的問題,所以使用塊元素。

+0

請參閱編輯我的問題... – JAVAGeek 2013-03-28 11:31:34

+0

@JAVAGeek - slideDown()不這樣做,這是你正在嘗試做的 - > [** FIDDLE **](http://jsfiddle.net/9SsUN/4) – adeneo 2013-03-28 11:35:42

+0

正確:D .......謝謝... – JAVAGeek 2013-03-28 11:37:39

0

新格在顯示狀態下創建,所以在頁面上立即可見。

如果你創建它隱藏,你可以將其推下來:

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

http://jsfiddle.net/ua2GM/

+0

請參閱編輯我的問題... – JAVAGeek 2013-03-28 11:33:03

0

它之所以不往下滑,因爲它已經是可見的。試着先隱藏起來,然後滑下:

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

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

+0

請參閱編輯我的問題 – JAVAGeek 2013-03-28 11:30:20

+0

@JAVAGeek我沒有明白你的意思,你能詳細說明一下嗎? – Eli 2013-03-28 11:33:00

+0

在你的小提琴...文本仍然在它的位置..它只是'div'那個幻燈片的下來..我想用div下滑文本..所以文本也顯示爲滑下來.. – JAVAGeek 2013-03-28 11:34:44

0

與元素只需更換的#delete的內容,你會立即在做節目的元素。此外,您可能希望稍後訪問該表單,因此最好隱藏它。

這是一個輕微的重組,可以實現您想要的slideDown,並且只隱藏窗體,以便稍後再顯示。

看到這個的jsfiddle:http://jsfiddle.net/z2gYZ/

+0

請參閱編輯我的問題... – JAVAGeek 2013-03-28 11:32:21