Powiększanie div-a w Jquery

Question

Witajcie drodzy panowie i panie :). Po raz kolejny zgłaszam się z prośbą o pomoc. Tym razem chodzi o JQuery, ale zaczne od początku. Mam bardzo dużego div-a z animacja zrobioną w css-ie, ma on wymiary  700x685. Teraz mam element tabeli (obrazek 40x31) z głównego diva. Chiałbym aby po kliknięciu na obrazek tworzyła się animacja rozszerzenia tego diva i wyświetlenia animacji. Powinien wyjść z tego obrazka. Żeby troszkę rozjaśnić efekt ten powinien być podobny do tego, jak klikniemy na obrazek on się powiększa. Próbowałem sam to zrobić, tworząc małego div-a, który po kliknięciu w niego powiększy się z pomocą wójka google ale nic nie dawało efektu :\. Dodam, że dopiero teraz zaczynam z JQuery, wcześniej programowałem tylko w czystym Java Script. Z góry dziękuję za wszelką pomoc.

Answer 1

jQuery ma dobrą  dokumentację

zajrzyj tu

możesz zrobić coś takiego

$('button').on('click', function () {
$('div')
.animate(
{
width: '300px',
height: '300px'}, 1000);

});

 

Comments

Dziękuję za szybką odpowiedź. Na testowanym przykładzie nie zadziałało :\. Interesuję mnie to button? Wstawiłem za niego nazwę div-a ponieważ nie próbuję odpalać tego z pomocy przycisku tylko po klikniętym div-ie, a i tak nie zadziałało. Ale teraz o dziwo nie ma błędów w konsoli :\.

---

a jak wstawiłeś nazwę diva?

jeśli div ma id równe np. example to do funkcji $() należy wysłać "#example"

w jquery obowiązują standardowe selektory z  css'a

czyli jeśli łapiemy elementy po klasie to najpierw używamy kropki

a jeśli tak jak w przykładzie jest $('button')

to złapiesz wszystkie przyciski(buttony) na stronie

---

Wezmę to pod uwagę, a powiedz mi czy w div też wstawić id obrazka z tym # lub div-a w teście zgadza się?

---

wydaje mi się że nie rozumiem o co  chodzi 

taka linia 

$('#e')

pobiera element o id e

taka 

$('button')

pobiera wszystkie

elementy 

<button></button>

a taka 

$('.kl')

pobiera wszystkie elementy o klasie kl

z kolei 

$('div > div.kl')

pobiera każdego div'a o klasie kl który znajduje się w divie

czyli

<div>

<div class="kl">to zostanie pobrane</div>

</div>

kiedy masz już to co zwróciła ta funkcja(ten obiekt)

to możesz wywoływać na nim te wszystkie funkcje

---

Dziękuję za rozjaśnienie sytuacji. Dziękuję również za dokumentację. Pomogłeś mnie a użyłem twojego przykładu i przykładu z dokumentacją. W przykładzie użyłem czegoś takiego i działa.
 

document.querySelector('#chmurka').addEventListener('click', function() {
    $( "#chmurka" ).animate({
    width: "300px",
	height: "300px",
  }, 1500 );
});

Teraz już mogę działać. Dziękuję raz jeszcze :).

---

Cieszę się. W twoim kodzie można użyć metody .on Zamiast .addEventListener

działa tak samo

$('#chmurka').on('click', function() {
    $( "#chmurka" ).animate({
    width: "300px",
    height: "300px",
  }, 1500 );
});

 

---

O jeszcze raz dziekuje za wskazanie wlasciwej drogi. Akurat jutro bede sie zajmowal animacja chmurki, na pewno sie przyda :).