Dlaczego nic się potem nie dzieje???

Question

<script>

		    
		    	 $('document').ready( function () {

		    		$("#but").click( function () {


						$('#object').animate({bottom:"100px"},"fast" );
						$('#object').animate({right:"100px"},"fast");
						$('#object').animate({top:"100px"},"fast");
						$('#object').animate({left:"100px"},"fast");


		    			


		    		}

		    			);

		    	}

		    		);
		    </script>

Skrypt ten jest wykonany po naciśnięciu przycisku. Gdy go klikam skrypt działa i wykonuje się animacja polegająca na zmienianiu właściwości css tego objektu (div) Możemy zaobserwować krótką animację. Jednak gdy klikam w przycisk druga raz, to nic się nie dzieje. Tak jakby ten skrypt (animacja) mogła wykonać się tylko raz.

Answer 1

Bo ustalasz raz tylko wskazaną wartość i jest JEST ONA NIEZMIENNA. Masz nawet przykład w dokumentacji, jak należy to zrobić:

( "#left" ).click(function(){
  $( ".block" ).animate({ "left": "-=50px" }, "slow" );
});

 

Comments

O jaką wartość ci chodzi? O położenie zapisane jako ilość pixeli od marginesu? No chyba raczej jest zmienna gdy w właściwości diva mamy position:absolute; Inaczej animate by nie zadziałał.

---

Margines , a wobec czego ma się dostosywać element to są DWIE RÓZNE RZECZY.  Bo element może mieć margines, ale również przesunięcie (top, left i tak dalej).

Taka dygresja na ten temat:

Tak chodzi o wartość podałeś tam 100. A ta liczba jest watością stałą. I skrypt zgodnie z działaniem wykonuje przesunięcie o 100 i tylko o 100. Ponieważ, animate nie dokłada swojej klasy CSS a pracuje na style. Mówiąc inaczej, dokleja swoje wartości do tagu style lub jak go nie ma -> to tworzy. I wpisuje stałą wartośc, czyli 100. A mowiąc dobitniej, każdy element(a właściwie węzeł) DOM (nawet ten bez id czy klasy), posiada właściwości, gdyż w JS każdy element DOM jest obiektem, jedną z takich właściwości jest style,margin te pole, poazwala  na przykład dodać do niego 100 po przez style, przez co margines wzrośnie . Ale on tylko raz to doda. Gdyż nie ma mechanizmu "=+" lub "=- " (zapomniałem jak to się nazywa xD), tym sposobem informuje przeglądarkę, że będę od wskazanej wartości (np: style.margin) zwiększał o 50 lub zmieniejszał np: 50, przy każdym zaincjonowaniu funkcji.  Przykład:

document.getElementById("jakis przycisk").addEventListener('click', function (50){
moveElement(50);}, false)


function moveElement(mojaWartoscPrzesuniecia){ 
var margin = document.getElementById("jakisElementDiv).style.marginLeft =+ mojaWartoscPrzesuniecia;
console.log ("Element HTML ma obecnie wartość " + margin);
}

Oczywiście postion nie jest równe margin, ale ma to służyć za przykład.

Czyli by skrypt poprawnie działał:

                        $('#object').animate({bottom:"+=100px"},"fast" );
                        $('#object').animate({right:"+=100px"},"fast");
                        $('#object').animate({top:"+=100px"},"fast");
                        $('#object').animate({left:+=100px"},"fast");