2013-07-10 23 views
6

próbuję dostać slideDown() animacji jQuery do pracy, ale w moim przypadku tekstu, który powinien suwak w dół tylko pojawia .. Jak mogę się wydawać z animacją na miejscu też?jQuery slideDown() animacja nie działa

Próbowałem również ręcznie określić prędkość, ale wynik końcowy był taki sam.

HTML:

<section class="subscribe"> 
    <button id="submitBtn" type="submit">Subscribe</button> 
    <p></p> 
</section> 

JavaScript:

$(function() { 
    $("#submitBtn").click(function (event) { 
     $(".subscribe p").html("Thanks for your interest!").slideDown({ 
         duration: 4000 
        }); 
    }); 
}); 

JSFiddle:http://jsfiddle.net/ahmadka/A2mmP/

Odpowiedz

7

Twój p elementem jest już wyświetlany po wpisaniu tekstu i TR y, aby ją zsunąć. Więc animacja nie jest potrzebna.

$(function() { 
    $("#submitBtn").click(function (event) { 
    $(".subscribe p").hide().html("Thanks for your interest!").slideDown(4000); 
    }); 
}); 
+2

Wiedziałem widoczność miał coś z tym zrobić .. Próbowaliśmy innych metod, aby to ukryć, ale nie pracuj ... Twój kod działa! Dzięki stary ! : D – Ahmad

+0

Możesz również ukryć to na CSS. Szybszy w ten sposób do renderowania. – Alvaro

4

Można to zrobić mając treść ukrytą w pierwszym i potem po prostu pokazując ją z slideDown funkcję:

HTML

<section class="subscribe"> 
    <button id="submitBtn" type="submit">Subscribe</button> 
    <p>Thanks for your interest!</p> 
</section> 

CSS

.subscribe p{ 
    display:none; 
} 

jQuery

$(function() { 
    $("#submitBtn").click(function (event) { 
     $(".subscribe p").slideDown({duration: 400}); 
    }); 
}); 

żywym przykładem: http://jsfiddle.net/A2mmP/2/

3

Twój kod zmodyfikowany

$(function() { 
    $("#submitBtn").click(function (event) { 
     $(".subscribe p").html("Thanks for your interest!").hide().slideDown('400'); 
    }); 
}); 

Sprawdź to demo