[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ć (IMG:style_emoticons/default/sad.gif)
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 (IMG:style_emoticons/default/smile.gif)


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 (IMG:style_emoticons/default/sad.gif)
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 (IMG:style_emoticons/default/smile.gif)
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 "
(IMG:style_emoticons/default/sad.gif) 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 (IMG:style_emoticons/default/smile.gif)


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 (IMG:style_emoticons/default/sad.gif)
HELP ME PLEASE (IMG:style_emoticons/default/smile.gif)

[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 (IMG:style_emoticons/default/smile.gif)

Nie działa co prawda jeszcze jak bym chciał ale już obraca obrazek i wysuwa formularz po kliknięciu (IMG:style_emoticons/default/smile.gif)
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 (IMG:style_emoticons/default/smile.gif)


Nie jest doskonale ....ale:

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

Mniej więcej o oto mi chodziło (IMG:style_emoticons/default/smile.gif)