jQuery: Animating Div Resize na "Kliknij"

Mam div używam, aby pokazać użytkownikowi status. Jego szerokość jest zależna od wartości procentowej (0-100). Po kliknięciu przycisku chciałbym animować szerokość (w pikselach) tego elementu div. Jakikolwiek wkład w najlepszy sposób na zrobienie tego? Korzystam już z jQuery, zakładam, że użyje tego do animacji? (Mój panel jest początkowo ukryty, stąd funkcja .live).jQuery: Animating Div Resize na "Kliknij"

$('#slider50').live("click", function() { 

    // Animate here 

    });

Źródło

2011-09-04 Zakman411

Zapoznaj się z jQuery UI (http://jqueryui.com/) i funkcją '.animate()' http://api.jquery.com/animate/. Zrobi to, co chcesz. – PeeHaa

@PeeHaa Nie sugerowałbym całej biblioteki UI do animowania pojedynczego elementu, a także '.animate()' dostępnej w magazynie jQuery. – Bojangles

@JamWaffles: '.animate()' jest dostępny w magazynie? Czy to się zaczęło od 1.6. – PeeHaa

Jak stwierdził PeeHaa można użyć .animate() jQuery funkcja rozszerzyć jesteś div szerokość, jak pokazano w poniższym przykładzie:

http://jsfiddle.net/DKjKP/1/

$("#button").click(function() { 
    $("#slider").animate({ 
     width: '+=30px' 
    }, 1000); 
});

Źródło

2011-09-04 02:03:54 Bassem

Możesz użyć efektów jQuery [jQuery Effects docs] (http://api.jquery.com/category/effects/) dla efektów łagodzenia, dodatkowo biblioteka ta rozszerzy funkcje $ .addClass()/$. RemoveClass() na pozwalają przejść między zmianami stylizacji, których możesz użyć do zmiany szerokości. – Bassem

Czy istnieje sposób ustawiania bezwzględnej szerokości? Tak jak "szerokość: 400px" – Zakman411

Oczywiście po prostu zastąp "+ = 30px" wartością "400px", co oznacza, że będzie animować od wartości początkowo pierwotnej do 400px. "+ =" zawsze zwiększy dowolną wartość o X px lub procent. – Bassem

Łatwym rozwiązaniem, które myślę, że praca byłaby trochę coś podobnego do tego:

$("#slider50").live("click", function() { 
    $(this).slideDown(); 

    /* or something like this 
    $(this).animate({ 
     'width' : '500px', 
     'height': '500px' 
    }); 
    */ 
});

Nadzieja to pomaga

Źródło

2011-09-04 02:00:06 GoGoGarrett

jQuery: Animating Div Resize na "Kliknij"

Odpowiedz

Powiązane problemy