Hey allemaal,
Ik zoek een paar jQuery effecten maar ik weet niet waar ik deze moet zoeken/ downloaden.
Dit is wat ik zoek:
Ik heb dit geheel: (vaag plaatje, zwart balkje, tekst en icoontje)
En als je er met je muis overheen gaat moet het plaatje helder worden, eerst was hij dus een soort van doorzichtig of wazig.
Iemand trouwens een idee hoe ik dit het best kan slicen?
Verder zoek ik nog een effectje, dat de hover van tekst een fade effectje heeft.
Dus als je met je muis op een link gaat staan, springt hij niet zomaar naar een andere kleur, maar veranderd deze langzaam.
En nog een laatste effect, waarbij je met je muis op een plaatje gaat staan, dat er dan een zwart balkje
onderaan het plaatje verschijnt met tekst. (dit zie je vaak terug in portfolio's)
Bijvoorbaat dank, en gelieve even te vermelden hoe ik dit in het vervolg zelf kan zoeken.
Want ik kan het natuurlijk niet elke keer hier gaan vragen. ;)
- jQuary effecten
-
11-08-2010, 12:32 #1
- Berichten
- 316
- Lid sinds
- 14 Jaar
jQuery effecten
Laatst aangepast door Leone H. : 11-08-2010 om 12:51
-
In de schijnwerper
Website te koop | CV Helpdesk| Pasieve inkomstenWebsite te koopMomentsleutel info - Veel content - Affiliate - Bieden vanaf slechts 19 euro!Website te koopDeal: Boekarest Gids | Stedentrips website | 268 artikelenWebsite te koopAangeboden: blogplaatsing -> DA34, PA42, DR43 & mét bezoekers!Linkpartners -
11-08-2010, 12:35 #2Simon van Acht - Interaction & Graphics
- Berichten
- 61
- Lid sinds
- 16 Jaar
Zoiets?
http://api.jquery.com/category/effects/
Google is your best friend.
-
11-08-2010, 12:37 #3
- Berichten
- 316
- Lid sinds
- 14 Jaar
Maar ik zoek kant en klare scripts die doen wat ik hierboven heb beschreven,
Omdat het zelf niet kan scripten, maar toch bedankt.
-
11-08-2010, 12:46 #4
- Berichten
- 258
- Lid sinds
- 18 Jaar
$('a').hover(function(){
$(this).animate({opacity: 1}); //mouse hover
}, function(){
$(this).animate({opacity: 0.5}); //mouse off
});
-
11-08-2010, 12:50 #5
- Berichten
- 316
- Lid sinds
- 14 Jaar
of moet ik dit dan invullen op de plek waar nu a staat.
En ik denk niet dat ik die plaatjes zou hebben gemaakt en alles zou hebben getypt als ik het zo op google kon vinden.Laatst aangepast door Leone H. : 11-08-2010 om 13:01
-
11-08-2010, 12:57 #6
- Berichten
- 258
- Lid sinds
- 18 Jaar
Ziezo;
$('ul#menu>li>a').hover(function(){
$(this).animate({opacity: 1}); //mouse hover
}, function(){
$(this).animate({opacity: 0.5}); //mouse off
});
-
11-08-2010, 12:58 #7
- Berichten
- 660
- Lid sinds
- 17 Jaar
$("ul#menu>li>a").css({opacity: 0.5});
-
11-08-2010, 13:00 #8
- Berichten
- 258
- Lid sinds
- 18 Jaar
Inderdaad aanpassen op de plek waar nu a staat:
Die eerste regel heb ik toegevoegd omdat je natuurlijk in eerste instantie de opacity op 0.5 wilt hebben staan. Overigens doe ik dit niet met css omdat gebruikers die javascript uit hebben staan nu het plaatje op 100% zien
Ik vermoed wel dat je een foute syntax gebruikt voor de css-functie. http://api.jquery.com/css/
-
11-08-2010, 13:06 #9
- Berichten
- 316
- Lid sinds
- 14 Jaar
PHP Code:<div id="navigation">
<ul id="menu">
<li class="active"><a href="#">Homepage</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Showcase</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<script type="text/javascript">
$("ul#menu>li>a").css({opacity: 0.5});
$("ul#menu>li>a").hover(function(){
$(this).animate({opacity: 1});
}, function(){
$(this).animate({opacity: 0.5});
});
</script>
Of doet jQuery het niet client-side?
Oh volgens mij haal ik nu 2 effecten door elkaar.
-
11-08-2010, 13:06 #10
- Berichten
- 660
- Lid sinds
- 17 Jaar
Leuke toevoeging. Ik durf dit wel eens in m'n css te doen, wat inderdaad fout is. Bedankt voor de herinnering. :)
Ik vermoed wel dat je een foute syntax gebruikt voor de css-functie. http://api.jquery.com/css/
Aanvullend bericht:
PHP Code:<div id="navigation">
<ul id="menu">
<li class="active"><a href="#">Homepage</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Showcase</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<script type="text/javascript">
$("ul#menu>li>a").css({opacity: 0.5});
$("ul#menu>li>a").hover(function(){
$(this).animate({opacity: 1});
}, function(){
$(this).animate({opacity: 0.5});
});
</script>
Of doet jQuery het niet client-side?PHP Code:<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Laatst aangepast door Lodewijk d.V. : 11-08-2010 om 13:07 Reden: Automatisch samengevoegd.
-
11-08-2010, 13:11 #11
- Berichten
- 316
- Lid sinds
- 14 Jaar
Dank jullie wel,
Ik heb dat stukje code toegevoegd en nu werkt het goed :)
PHP Code:<a href="/portfolio"><img class="img" src="images/image_1.jpg" alt="" /></a>
<script type="text/javascript">
$(".img").css({opacity: 0.5});
$(".img").hover(function(){
$(this).animate({opacity: 1});
}, function(){
$(this).animate({opacity: 0.5});
});
</script>
Iemand verder nog de scriptjes voor de andere effecten.
-
11-08-2010, 13:15 #12
- Berichten
- 660
- Lid sinds
- 17 Jaar
Dank jullie wel,
Ik heb dat stukje code toegevoegd en nu werkt het goed :)
PHP Code:<a href="/portfolio"><img class="img" src="https://www.sitedeals.nl/images/image_1.jpg" alt="" /></a>
<script type="text/javascript">
$(".img").css({opacity: 0.5});
$(".img").hover(function(){
$(this).animate({opacity: 1});
}, function(){
$(this).animate({opacity: 0});
});
</script>
Iemand verder nog de scriptjes voor de andere effecten.
Voor het zwarte balkje: ontwerp hem allereerst in css, zonder javascript op de plaats waar je hem wilt hebben (dus met bottom: 0px;).
Vervolgens voeg je de javascript toe, en dit lijkt sprekend op het eerdergenoemde:
PHP Code:<script type="text/javascript">
$(".balk").css({opacity: 0});
$(".balk").hover(function(){
$(this).animate({opacity: 1});
}, function(){
$(this).animate({opacity: 0.5});
});
</script>
-
11-08-2010, 13:18 #13
- Berichten
- 316
- Lid sinds
- 14 Jaar
Oké, bedankt.
Het ziet er idd niet zo moeilijk uit, ik zal de basis eens gaan leren.
Alleen bij die links zou ik niet weten hoe dat dan geanimeerd moet worden.
Moet je dan dat attribuut dan gewoon de animate functie meegeven zonder er verder iets bij te zetten?
Aangezien in de css de kleuren al bepaald worden.
-
11-08-2010, 13:21 #14
- Berichten
- 660
- Lid sinds
- 17 Jaar
Oké, bedankt.
Het ziet er idd niet zo moeilijk uit, ik zal de basis eens gaan leren.
Alleen bij die links zou ik niet weten hoe dat dan geanimeerd moet worden.
Moet je dan dat attribuut dan gewoon de animate functie meegeven zonder er verder iets bij te zetten?
Aangezien in de css de kleuren al bepaald worden.
deze roep je op met:
PHP Code:<script type="text/javascript" src="jquery/jquery-ui-1.8.2.custom.min.js"></script>
Dan kan je een soortgelijk effect als eerder gebruiken:
PHP Code:<script type="text/javascript">
$(".tekst").hover(function(){
$(this).animate({color: '#000099'});
}, function(){
$(this).animate({color: '#000000'});
});
</script>
Overigens kan je ook een deel van de ui-library downloaden wat in dit geval sneller is.
-
11-08-2010, 13:32 #15
- Berichten
- 316
- Lid sinds
- 14 Jaar
Moet ik deze hier downloaden?
http://jqueryui.com/download
Zoja, welke componenten moet ik selecteren
Plaats een
- + Advertentie
- + Onderwerp
Marktplaats
Webmasterforum
- Websites algemeen
- Sitechecks
- Marketing
- Domeinen algemeen
- Waardebepaling
- CMS
- Wordpress
- Joomla
- Magento
- Google algemeen
- SEO
- Analytics
- Adsense
- Adwords
- HTML / XHTML
- CSS
- Programmeren
- PHP
- Javascript
- JQuery
- MySQL
- Ondernemen algemeen
- Belastingen
- Juridisch
- Grafisch ontwerp
- Hosting Algemeen
- Hardware Info
- Offtopic