2013-01-15 21 views
10
<div class="factuuradres"></br><h3></h3></div> 
<div class="factuuradresbutton">Meer Informatie</div>   

<script type="text/javascript"> 
    $(".factuuradresbutton").toggle(function(){ 
     $(".factuuradres").animate({ 
      height: "310px" 
     }, 500); 
     complete: function() { 
      $(".factuuradresbutton").html("Toch geen factuuradres") 
      $(".factuuradres").html('<h2>Factuuradres</h2><div class="title_textbox3"><h3>Postcode:</h3></div><div class="textbox3"><input type="text" class="postcode" name="Postcode" value=""/></div><div class="title_textbox4"><h3>Huisnummer:</h3></div><div class="textbox4"><input type="text" class="huisnummer" name="Huisnummer" value=""/></div><div class="title_textbox"><h3>Straat:</h3></div><div class="textbox"><input type="text" class="field" name="Straat" value=""/></div><div class="title_textbox"><h3>Plaats:</h3></div><div class="textbox"><input type="text" class="field" name="Plaats" value=""/></div>') 
     } 
    }, 

    function(){ 
     $(".factuuradres").animate({ 
      height: "160px" 
     }, 500); 
     $(".factuuradresbutton").html("Ander factuuradres?") 
     $(".factuuradres").html("Factuuradres") 
    }); 
</script> 

मुझे आश्चर्य है कि क्यों complete: function() काम नहीं कर रहा है, कोई भी जो मुझे सलाह दे सकता है?jquery एनिमेट पूर्ण

यह भी कामकाजी स्क्रिप्ट है, लेकिन बटन पर क्लिक करने के बाद यह टूट जाता है। एक या दो के बाद यह इरादा की तरह काम करता है। एक एनीमेशन पूरा करता है जब चेतन समारोह के लिए एक पैरामीटर है

<script type="text/javascript"> 
    $(".factuuradresbutton").toggle(function(){ 
    $(".factuuradres").animate({ 
     height: "610px" 
    }, 500); 
    $(".factuuradresbutton").html("Toch geen factuuradres") 
    $(".factuuradres").html('<h2>Factuuradres</h2><div class="title_textbox3"><h3>Postcode:</h3></div><div class="textbox3"><input type="text" class="postcode" name="Postcode" value=""/></div><div class="title_textbox4"><h3>Huisnummer:</h3></div><div class="textbox4"><input type="text" class="huisnummer" name="Huisnummer" value=""/></div><div class="title_textbox"><h3>Straat:</h3></div><div class="textbox"><input type="text" class="field" name="Straat" value=""/></div><div class="title_textbox"><h3>Plaats:</h3></div><div class="textbox"><input type="text" class="field" name="Plaats" value=""/></div>') 
    }, 
    function(){ 
    $(".factuuradres").animate({ 
     height: "160px" 
    }, 500); 
    $(".factuuradresbutton").html("Ander factuuradres?") 
    $(".factuuradres").html("Factuuradres") 
    }); 
    </script> 
+1

जहां पूरा समारोह लागू कर रहे हैं? आपका एनिमेट कॉल बंद हो जाता है); 500 – ryadavilli

+1

के बाद कंसोल की जांच करें। आपका जवाब वहां वाक्यविन्यास त्रुटि होगी। –

+1

आपका वाक्यविन्यास गलत है। [JSHint] (http://jshint.com) के माध्यम से अपना कोड चलाएं। – brianpeiris

उत्तर

25

बस अपनी टिप्पणी देखा है और इस के लिए मेरे उत्तर बदला: http://jsfiddle.net/t3ttW/1/

$(".factuuradresbutton").toggle(function() { 
     $(".factuuradres").animate({ 
     height: "610px" 
     }, { 
     duration: 500, 
     complete: function() { 
      $(".factuuradresbutton").html("Toch geen factuuradres") 
      $(".factuuradres").html('<h2>Factuuradres</h2><div class="title_textbox3"><h3>Postcode:</h3></div><div class="textbox3"><input type="text" class="postcode" name="Postcode" value=""/></div><div class="title_textbox4"><h3>Huisnummer:</h3></div><div class="textbox4"><input type="text" class="huisnummer" name="Huisnummer" value=""/></div><div class="title_textbox"><h3>Straat:</h3></div><div class="textbox"><input type="text" class="field" name="Straat" value=""/></div><div class="title_textbox"><h3>Plaats:</h3></div><div class="textbox"><input type="text" class="field" name="Plaats" value=""/></div>'); 
     } 
     }); 
    }, 

    function() { 
     $(".factuuradres").animate({ 
     height: "160px" 
     }, 500); 
     $(".factuuradresbutton").html("Ander factuuradres?") 
     $(".factuuradres").html("Factuuradres") 
    }); 
+0

मैं टॉगल का उपयोग कर रहा हूं, इसलिए यदि मैं बटन पर क्लिक करता हूं, तो "factuuradres" div के अंदर जो पाठ है, वह दिखाई दे रहा है, लेकिन इस स्क्रिप्ट के साथ बटन अब और काम नहीं कर रहा है। (मुख्य पोस्ट की जांच करें, एक वर्किंग स्क्रिप्ट अपडेट करें, लेकिन मुझे पूरा फ़ंक्शन होना चाहिए। –

+0

ने अभी जवाब अपडेट किया है। – Jai

+0

बहुत बढ़िया जय, मुझे जो चाहिए वह था! –

5
$(".factuuradres").animate({ 
     height: "310px" 
    }, 500, function() { 
     $(".factuuradresbutton").html("Toch geen factuuradres") 
     $(".factuuradres").html('<h2>Factuuradres</h2><div class="title_textbox3"><h3>Postcode:</h3></div><div class="textbox3"><input type="text" class="postcode" name="Postcode" value=""/></div><div class="title_textbox4"><h3>Huisnummer:</h3></div><div class="textbox4"><input type="text" class="huisnummer" name="Huisnummer" value=""/></div><div class="title_textbox"><h3>Straat:</h3></div><div class="textbox"><input type="text" class="field" name="Straat" value=""/></div><div class="title_textbox"><h3>Plaats:</h3></div><div class="textbox"><input type="text" class="field" name="Plaats" value=""/></div>') 
    }); 
+0

जिस तरह से 'एनिमेट' में कॉलबैक गलत है। @ जे जवाब सही है। –

+0

क्षमा करें! मैं गलत था; यह भी काम करता है! –

2

कॉलबैक फ़ंक्शन कहा जाता है। वर्तमान में कोड पैरामीटर के रूप में फ़ंक्शन को पास नहीं कर रहा है।

+0

कोई विचार यह कैसे हल करें? –

+0

@RinkeDoeser मुझे जेम्स डोननेल के समाधान पसंद है, यह दर्शाता है कि मेरी शब्दावली क्या बताती है। –

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