2009-06-23 10 views
5

मुझे jquery फॉर्म प्लगइन का उपयोग करने में कोई समस्या है। मेरे पास एक ऐसा फॉर्म है जो सेटअप है कि जब कोई उपयोगकर्ता गलत जानकारी सबमिट करता है या सही जानकारी दर्ज करते समय उपयोगकर्ता को एक सफल संदेश देता है तो मैं त्रुटियों/सफलता को एनिमेट करना चाहता हूं। हालांकि मेरी समस्या दो गुना है। संदेश जो एक ही पृष्ठ पर प्रदर्शित होता है केवल jquery के साथ फ़ायरफ़ॉक्स में काम करता है जिसे मैं वर्तमान में उपयोग कर रहा हूं। इसका क्या कारण होगा?jquery फॉर्म प्लगइन का उपयोग करके एनिमेट संदेश

मैं प्रदर्शित होने पर अलग-अलग संदेशों को देखने में स्लाइड करना चाहता हूं लेकिन अभी वे सिर्फ दृश्य में आ गए हैं। मैं इसे कैसे एनिमेट कर सकता हूं या दृश्य में स्लाइड कर सकता हूं?

$('.message').show("slow"); 

jQuery देखें show(speed, [callback])

दस्तावेज़ का कहना है: उक्त पृष्ठ here

$(document).ready(function() { 
var options = { 
target:  '#alert', 
}; 
$('#myForm').ajaxForm(options); 
}); 

$.fn.clearForm = function() { 
    return this.each(function() { 
    var type = this.type, tag = this.tagName.toLowerCase(); 
    if (tag == 'form') 
     return $(':input',this).clearForm(); 
    if (type == 'text' || type == 'password' || tag == 'textarea') 
     this.value = ''; 
    else if (type == 'checkbox' || type == 'radio') 
     this.checked = false; 
    else if (tag == 'select') 
     this.selectedIndex = -1; 
    }); 
}; 
/*this is my addition to getting the slide into view, but does not work */ 
$('#alert').onsubmit(function() { 
    // This will be called before the form is submitted 
    $('.message').show().animate("slow"); 
}); 


/*$(function() { 
     $('.message').('slow').show('slow'); 
     $('.message').('slow').show('slow').animate({opacit:1.0}, 4000).hide('slow'); 
    $('input').clearForm() 
}); */ 

उत्तर

4

इस बजाय, सामान्य शो() कर प्रयास करें/छिपाने() तरीकों में भी कर सकते हैं एनीमेशन है :

सुन्दर एनीमेशन और फायरिंग का उपयोग करके सभी मिलान किए गए तत्व दिखाएं एन पूरा होने के बाद वैकल्पिक कॉलबैक।

इसके अलावा, आप गलत() गलत तरीके से उपयोग कर रहे हैं। इसके लिए काम करने के लिए, कम से कम आपको कुछ सीएसएस गुणों को विकल्पों के सेट के रूप में पास करने की आवश्यकता है। डॉक्स देखें:

http://docs.jquery.com/Effects/animate

संपादित करें: है कि वह जगह है जहाँ मैं अपने सुझाव का उपयोग का मतलब:

$('#alert').onsubmit(function() { 
    // This will be called before the form is submitted 
    $('.message').show("slow"); 
}); 
+0

इस इस होना चाहिए है: ('। संदेश') $।दिखाएं ("धीमा") { }); आप टिप्पणियों में कोड कैसे प्रारूपित करते हैं? –

+0

@capnhud - कृपया मेरा संपादन – karim79

0

हाँ, आपकी समस्या को आप एनीमेशन तरीकों को गलत तरीके से उपयोग कर रहा है। मैं आपको jquery api docs में 'एनिमेट' फ़ंक्शन पर अनुभाग पढ़ने के लिए आग्रह करता हूं। करीम का सुझाव शायद वही है जो आप चाहते हैं, लेकिन, यदि आप एक स्लेडाउन-इश प्रकार की चीज़ की तुलना में अधिक विस्तृत एनीमेशन चाहते हैं, तो आप या तो 'फेडइन' या 'एनीमेशन' विधियों का उपयोग कर सकते हैं।

$('.message').fadeIn(500); 

कौन सा एक आधे की अवधि एक दूसरे ओवर में एक आइटम फीका करना होगा:

उदाहरण के लिए ...

$('.message').animate({opacity:100},500); 

प्रभावी रूप से के रूप में एक ही बात करना होगा। इस मामले में animate विधि का उपयोग करके समय बिताना इतना उपयोगी नहीं है। यह, इस मामले में उपयोगी होगा उदाहरण के लिए:

$('.message').animate({opacity:100,width:'100%',height:30},500); 

यह 100% करने के लिए संदेश फैलाने और यह ऊंचाई 30px और 100% सभी 500 मिलीसेकेंड के पाठ्यक्रम पर अस्पष्टता है बनाकर यह दिखा देंगे।

'ऊंचाई' और 'चौड़ाई' एनिमेशन के लिए काम करने के क्रम में, तत्व को आम तौर पर ब्लॉक तत्व होना होता है।

overkill विस्तार के लिए खेद है ... मैं कर रहा हूँ एक सा पल में ऊब ...

+0

देखें जो कि karim79 सुझाव दिया गया है कि फ़ॉर्म को इसके डिफ़ॉल्ट व्यवहार पर वापस जाने का कारण बताया गया है। –

संबंधित मुद्दे