Witam
Chciałbym zrobić w JQuery tak aby po najechaniu na przycisk został on podkreślony (border-bottom) na jakiś kolor.
Tak aby po najechaniu pojawiła się kreska pod napisem. Oczywiście animowane.
A po zjechaniu myszy ma ona powoli zniknąć.
To co mam, i nie działa, jest w załączniku.
- Nie wrzucaj zipów, tylko wklej kod na forum, a najlepiej wrzuć na jsbin.com
- Nie pisz stron w notatniku!
- ... Bo masz błąd składni, źle zamknięte nawiasy - IDE by Ci wskazało błąd zanim byś zdążył pomyśleć o zakładaniu wątku na forum.
- ... A wiem to, bo sprawdzam konsolę błędów (Google:
konsola błędów js nazwa_przeglądarki
), a Ty nie
Poprawiłęm.... ale i tak animacja nie działa.
<script>
$(document).ready(function(){
$(".button").mouseenter(function(){
$(this).css({borderBottomColor:"transparent",borderBottomStyle:"solid",borderTopWidth:"1px"}).animate({borderBottomColor:'#70c989'}, 'slow', 'linear');
});
$(".button").mouseleave(function(){
$(this).css({borderBottomColor:"#70c989",borderBottomStyle:"solid", borderBottomWidth:"1px"}).animate({borderBottomColor:'transparent'}, 'slow', 'linear');
});
$(".button").click(function(){
$(".button").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
});
</script>
Animowanie kolorów zdaje się jest dostępne dopiero po załadowaniu jQuery UI.
A po co w ogóle robisz to w JS, skoro łatwiej i płynniej będzie to działać zrobione w CSS?
A jak włączyć t to w Jquery?
Musisz załadować bibliotekę jQuery UI, ale tak na szybko i tak to nie działało, a ponieważ nie lubię zagłębiać się w tajniki wiedzy sprzed lat i generalnie "robienia nie tak jak należy" to nawet nie bawię się w debugowanie tego. Zrób w CSS, a jeżeli nie chcesz to podaj rozsądny powód - dlaczego nie?
Już robiłem to w CSS (nawet w moim zipie sa tego ślady) ale nie za bardzo wiedziałem jak zrobić by zjechaniu podkreślenie było przezroczyste i jakoś tak namieszałem, że działało ale zawsze po załadowaniu strony animacja się wykonywała, za każdym odświeżeniem...
http://jsbin.com/larumarawe/edit?html,css,output przecież to raptem kilka linijek ...
transition? pierwsze słyszę...
To może pierwsze poczytaj, a potem rób?
Coś w tym jest...
Dobra, to Jquery nie potrzebne, przynajmniej na razie, zrobię to w CSS a potem się zobaczy.
Dzięki za pomoc.