scroller jquery

2011-08-30 21:19:44 Post #1 gość_gosc

 
od razu mowie, ze na jquery znam sie marnie

chce zrobic prosty slider, cos w stylu:

[img]http://s4.ifotos.pl/img/Beztytulu_hanwepw.png[/img]

po najechaniu na lewą strzałkę tekst ma się przesuwać w lewo, a po najechaniu na prawą w prawo

zrobiłem na razie coś takiego:
1
2
3
4
5
6
7
8
9
<!-- Slidebox -->
        <div id="slidebox">
            <a href="" class="l_arrow" id="slide-left" title="Przewiń w lewo"><img src="./images/larrow.png" alt="" /></a>
            <ul class="slide-content">
                <li>To jest przykładowy tekst</li>
            </ul>
            <a href="" class="r_arrow" id="slide-right" title="Przewiń w prawo"><img src="./images/rarrow.png" alt="" /></a>
        </div>
        <!-- End slidebox -->

i jquery:

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
        $(document).ready(function(){
            $("#slide-left").hover(function() {
            
            });
        });
        $(document).ready(function(){
            $("#slide-right").hover(function() {
            
            });
        });
    </script>

głównie chodzi mi o funkcje, żeby przesuwała tekst w prawo

edit

szukałem w necie jakiegoś rozwiązania i znalazłem jquery.animate() tylko coś mi nie chce działać

zrobiłem tak:
1
2
3
4
5
6
7
8
9
<script type="text/javascript">
        $(document).ready(function() {
            $("#slide-left").hover(function() {
                $(".slide-content").animate({
                    right: '+=50'
                });
            });
        });
    </script>

ale w ogóle nic się nie dzieje po najechaniu na lewą strzałkę

2011-08-31 08:00:54 Post #2 nospor

 
Nie hover a mouseover.
Dodatkowo by div się przemieszczał to musi mieć odpowiedni styl

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="slidebox"> 
    <a href="" class="l_arrow" id="slide-left" title="Przewiń w lewo">LLL</a> 
    <div class="slide-content"> 
        <div id="tt" style="position:relative;">To jest przykładowy tekst</div> 
    </div> 
    <a href="" class="r_arrow" id="slide-right" title="Przewiń w prawo">PPPP</a> 
</div>
<script type="text/javascript"> 
jQuery(function(){
    jQuery("#slide-left").mouseover(function() { 
        jQuery("#tt").animate({ 
            left: '-=50' 
        }); 
    });
    jQuery("#slide-right").mouseover(function() { 
        jQuery("#tt").animate({ 
            left: '+=50' 
        }); 
    });

}); 
</script>

2011-08-31 10:28:16 Post #3 gość_gosc

 
juz sobie poradzilem, dzieki

Odpowiedz