[JavaScript][CSS] Obrót obrazka o 90stopni po kliknięciu Opcje

[php__amator]

Witajcie przedszkolacy,
Napotkałem taki problem i nie wiem jak go rozwiązać. Jakkolwiek obrót obrazka nie nastręcza problemu to już żeby odbyło się to dopiero po kliknięciu jest problemem.
Podpowiedzcie proszę jak to zrobić
Pomyślałem sobie, że można by z użyciem JS i onclick zmienić właściwości CSS i spowodować obrócenie obrazka.
W sumie, jeśli mozna by dodatkowo uzyskać efekt animacji obrotu było by wręcz cudownie.
Żeby obrazek poprostu nie przeskakiwał z pozycji pionowej do poziomej.

Please help ....

[Turson]

http://stackoverflow.com/questions/1519105...-jquery-animate
http://stackoverflow.com/questions/9776015...-a-rotating-div
http://stackoverflow.com/questions/3789984...-a-div-rotation
Próbowałeś w ogole szukac..?

[markuz]

http://jsfiddle.net/mYQNL/49/

[php__amator]

A troszkę szukałem chociaż bardziej skupiłem się na CSS-owym rozwiązaniu.
Dziękuję serdecznie Panowie przedszkolacy


Ok, a jak zmiksować te skrypty żeby działało ?

Pierwszy obraca obrazek, drugi wysuwa diva i pokazuje formularz.
który w nagłówku ma obrazek którym chcę wykonać obrót o 90stopni

<script type="text/javascript" language="JavaScript">
$('.rotate').click(function () {
$(this).rotate({
duration: 200,
angle: 0,
animateTo:90

});
var flip = 0;
$("#rotating1").click(function () {
flip++;
if (flip % 2 == 1)
$("#floatingenquire #contactform").slideDown('slow');
else
$("#floatingenquire #contactform").slideUp('slow');
});
});
</script>
Zrobiłem tak i na JSFiddle działa, natomiast po umieszczeniu wszystkich elementów na stronie ....... nie działa
http://jsfiddle.net/mYQNL/64/

[Pyton_000]

A co piszczy w konsoli developera?

[php__amator]

Nie zauważyłem a piszczy to:
Uncaught SyntaxError: Unexpected token var

Dlaczego więc działa na JSFiddle jeśli jest błąd ?

Taka wersja na JSFiddle działa jeszcze lepiej
Niestety tylko na JSFiddle

var flip = 0;
$('.rotate').click(function () {
$(this).rotate({
duration: 200,
angle: 0,
animateTo:90
});
flip++;
if (flip % 2 == 1)
$("#floatingenquire #contactform").slideDown('slow');
else
$("#floatingenquire #contactform").slideUp('slow');
});

w ckonsoli pokazuje błąd:
"Uncaught TypeError: undefined is not a function "
nie kumam

[viking]

Osadziłeś jquery na stronie? Jest to wewnątrz pliku JS albo <script>?

[php__amator]

W sumie nie bezpośrednio bo gdzieś tam jest odwołanie do jquery.
skrypt jest umieszczony w pliku xml z którego zawartość jest wklejana do głównego skryptu.

Zrobiłem więc tak:
<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.7.1.min.js"></script>
<script>
var flip = 0;
$('.rotate').click(function () {
$(this).rotate({
duration: 200,
angle: 0,
animateTo:90
});
flip++;
if (flip % 2 == 1)
$("#floatingenquire #contactform").slideDown('slow');
else
$("#floatingenquire #contactform").slideUp('slow');
});
</script>
ale dalej nie działa


Uncaught TypeError: undefined is not a function VM1344 index.php?route=common/home:472
(anonymous function) VM1344 index.php?route=common/home:472
n jquery-1.7.1.min.js:2
o.fireWith jquery-1.7.1.min.js:2
e.extend.ready jquery-1.7.1.min.js:2
c.addEventListener.B jquery-1.7.1.min.js:2
A tak mi wywala w konsoli
HELP ME PLEASE

[Pyton_000]

umieść cały skrypt w

Kod

$(function() {
...
})

[php__amator]

Powoli znajduje problemy. Już zaczęło działać.
Podlinkowałem osobnyą bibliotekę jQueryRotate i działa.
Okazało się, że standardowa jQuery nie działała stąd problem

Nie działa co prawda jeszcze jak bym chciał ale już obraca obrazek i wysuwa formularz po kliknięciu
Teraz nieco bardziej skomplikowane zadanie - przynajmniej dla mnie.

Mianowicie, jak spowodować, żeby po ponownym kliknięciu obrazek wracał do pierwotnego położenia ?

Właściwie to obrazek powinien być pionowo na początku czyli tak jak jest przygotowany a po kliknięciu powinien się obrócić do pozycji poziomej i tak zostać.
Następnie po ponownym kliknięciu powinien się spowrotem obrócić do pionu.
Jak tego dokonać ?

http://jsfiddle.net/mYQNL/97/
Tak to wygląda w tej chwili


Nie jest doskonale ....ale:

http://jsfiddle.net/mYQNL/123/

Mniej więcej o oto mi chodziło