jQuery - FadeTo Opcje

[yoji]

Chciałbym w swoim portfolio (Wordpress) wykorzystać funkcje jQuery, a dokładniej FadeTo
Chcę aby wszystkie obrazki na stronie działały w pod tą funkcją. Korzystam z tego tutka, ale nie mogę sobie z tym poradzić. Nie wiem po prostu gdzie dodać ten kod, do jakiego pliku [?]

Z góry bardzo dziękuje za pomoc.

fadeTo


FadeTo, w przeciwnieństwie do poprzedniczek lubi stany przejściowe. Za jej pomocą możemy sprawić, że wszystkie obrazki obrazki na stronie będą miały przezroczystość ustawioną na 50%.

Składnia tej funkcji wygląda następująco:

Kod

$(nazwa_selektora_ktoremu_chcemy_cos_zrobic).fadeTo("czas_trwania_efektu", do_jakiego_poziomu);

czyli jeśli będziemu chcieli wszystkie obrazki na stronie ustawić na te 50% piszemy

Kod

$("img").fadeTo("slow", .5);

Zobaczcie sami: przykład


FadeTo w praktyce
FadeTo użyjemy do przyozdobienia małej galeryjki.

Naszym zadaniem będzie najpierw ustawić obrazkom przezroczystość na 50%, a po najeździe przeroczystość stalić na 0.

Tak to będzie wyglądać:

Kod

<div class="javascript dean_ch" style="white-space: nowrap;">{:content:}lt;span class="br0">(</span>document<span class="br0">)</span>.ready<span class="br0">(</span><span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span>
                        {:content:}lt;span class="br0">(</span><span class="st0">"li"</span><span class="br0">)</span>.fadeTo<span class="br0">(</span><span class="st0">"fast"</span>, .5<span class="br0">)</span>;  <p>                {:content:}lt;span class="br0">(</span><span class="st0">"li"</span><span class="br0">)</span>.hover<span class="br0">(</span><span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>
                                {:content:}lt;span class="br0">(</span>this<span class="br0">)</span>.fadeTo<span class="br0">(</span><span class="st0">"fast"</span>, <span class="nu0">1</span><span class="br0">)</span>;
                        <span class="br0">}</span>,<span class="kw2">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span>
                                {:content:}lt;span class="br0">(</span>this<span class="br0">)</span>.fadeTo<span class="br0">(</span><span class="st0">"fast"</span>, .5<span class="br0">)</span>;
                        <span class="br0">}</span><span class="br0">)</span>;</p>  <p>                <span class="br0">}</span><span class="br0">)</span>;</p></div>

Ten post edytował yoji 8.06.2009, 13:05:56

[erix]

Chcę aby wszystkie obrazki na stronie działały w pod tą funkcją. Korzystam z tego tutka, ale nie mogę sobie z tym poradzić. Nie wiem po prostu gdzie dodać ten kod, do jakiego pliku [?]

A masz jQuery podpięte?

czyli jeśli będziemu chcieli wszystkie obrazki na stronie ustawić na te 50% piszemy

IMHO wystarczy w $(document).ready().

[yoji]

w katalogu templatki wrzuciłem plik fadeto.js jQuery
w header.php wkleiłem:

Kod

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>fadeto.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>jquery.js"></script>

ale nadal to nie działa..(IMG:http://forum.php.pl/style_emoticons/default/sad.gif)

Ten post edytował yoji 8.06.2009, 15:40:00

[erix]

Czy strona wczytuje Ci się od dołu do góry, czy na odwrót?

[yoji]

kurcze, teraz to nie wiem o co chodzi:)
moze lepiej podam adres stronki, klik!

Ten post edytował yoji 8.06.2009, 16:16:55

[erix]

Kod

JavaScript - http://elliot.zxy.me/test/wp-content/themes/photoblogfadeto.js

Linked script not loaded

[yoji]

poprawiłem już linki, ale to nic nie zmieniło...

może dam to co umieściłem w tych plikach:

fadeto.js

Kod

$(document).ready(function() {
         $("img").fadeTo("slow", .5);
        
         $("img").hover(function(){
              $(this).fadeTo("fast", 1);
         },function(){
               $(this).fadeTo("fast", .5);
         });

         });

jquery.js brałem stąd

Ten post edytował yoji 8.06.2009, 17:11:17

[erix]

Hmm, przecież wszystko działa...?

[yoji]

teraz juz tak:]