Ik zoek dit script met spoed. Beloning: Goede fles champagne!

**gast17521** · 15-02-2010, 14:01

Code:

$("#imgid").hover(
  function () {
    De hoverfunctie die moet je hier in pluren
  },
  function () {
    Als hij vandaan gaat pluer j de verwjider code hierin
  }
);

Hiermee moet het toch wel kunnen lukken?

**diederikva** · 15-02-2010, 14:03

Hoi Vincent,

Hartelijk dank. En het is inderdaad ook gelukt. Zie:
http://www.quattronet.nl/ontwikkeling/criterium/index

Maar dan zitten we nog met de mouse-out. Hoe kan ik daar een degelijke functie voor schrijven.

Diederik van Andel

**Arek van Schaijk** · 15-02-2010, 14:11

Ik geloof dat je dit zoekt:

Code:

$("#imgid").bind("mouseenter",function()
{
    // Het effect bij binnenkomst van het element
}).bind("mouseleave",function()
{
    // Het effect bij vertrek uit het element
});

**diederikva** · 15-02-2010, 14:12

Origineel gepost door Arek van Schayk

Ik geloof dat je dit zoekt:

Code:

$("#imgid").bind("mouseenter",function()
{
    // Het effect bij binnenkomst van het element
}).bind("mouseleave",function()
{
    // Het effect bij vertrek uit het element
});

Dag Arek,

Thanx voor je reactie! Echter heb ik dat allemaal al voor mekaar. Alleen met welke code kan ik het vertrek van het effect aangeven? Daar ben ik nog naar op zoek. De rest werkt al naar behoren :) Gelukkig maar! :)

**Arek van Schaijk** · 15-02-2010, 14:14

Origineel gepost door diederikva

Dag Arek,

Thanx voor je reactie! Echter heb ik dat allemaal al voor mekaar. Alleen met welke code kan ik het vertrek van het effect aangeven? Daar ben ik nog naar op zoek. De rest werkt al naar behoren :) Gelukkig maar! :)

Zoals ik hierboven al aangaf, je hebt een plaats voor de binnenkomst en een plaats voor het vertrek. Gebruik het op deze manier en niet anders. Desnoods verbouw je het maar, een beter advies kan ik je niet geven.

**gast17521** · 15-02-2010, 14:15

die effect .hide() http://api.jquery.com/hide/

**René Vennik** · 15-02-2010, 14:24

Of slideUp zoals ik al aangaf.

**diederikva** · 15-02-2010, 14:31

**Arek van Schaijk** · 15-02-2010, 14:33

$(document).ready(function(){

$("div.toggleme .slider").show();

$("div.toggleme").mouseenter(function(){
$(this).children(".slider").slideDown();

});
$("div.toggleme").mouseleave(function(){
$(this).children(".slider").slideUp();
});

});

Aangepast naar:
$("div.toggleme .slider").show();

**diederikva** · 15-02-2010, 14:40

Iedereen dank voor het helpen! Vooral dank naar Sylvia die me zojuist het werkende stukje code heeft aangeleverd!

**Ruud van der Velden** · 15-02-2010, 14:42

Puur uit interesse: is het ook mogelijk het na-ijl effect te omzeilen. Als je nu heel snel een paar keer over de boxen beweegt met je muis, wordt het effect ook een aantal keer uitgevoerd. Stel dat je dit niet wilt. Kun je het 'geheugen' dan even legen? Of is er een andere manier?

**Arek van Schaijk** · 15-02-2010, 14:53

Origineel gepost door Ruud van der Velden

Puur uit interesse: is het ook mogelijk het na-ijl effect te omzeilen. Als je nu heel snel een paar keer over de boxen beweegt met je muis, wordt het effect ook een aantal keer uitgevoerd. Stel dat je dit niet wilt. Kun je het 'geheugen' dan even legen? Of is er een andere manier?

Weet het niet zeker (heb ook geen tijd om het uit te zoeken) maar ver in mijn geheugen staat .queue en .dequeue Google hier eens op? Best moeilijk werkend te krijgen maar er bestaan wel mogelijkheden daarvoor.

**René Vennik** · 15-02-2010, 14:56

Ruud dat is mogelijk.

**diederikva** · 15-02-2010, 15:05

Weet iemand ook hoe dit mogelijk is dan? Ben eigenlijk ook wel benieuwd!

gast8691 · 15-02-2010, 15:31

Hoi Diederikva,
Onderstaande code: Kopiëren en plakken de afbeeldingen vervangen door eigen afbeeldingen, het script runnen en je ziet een aantal mogelijkheden.
Succes.

<html>
<head>
<title>Sliding Boxes and Captions with JQuery</title>

<style type="text/css">

*{ padding:0px; margin:0px; }
body{ background:#D5DEE7; }
a{ color:#C8DCE5; }
h3{ margin: 10px 10px 0 10px; color:#FFF; font:18pt Arial, sans-serif; letter-spacing:-1px; font-weight: bold; }

.boxgrid{
width: 325px;
height: 260px;
margin:10px;
float:left;
background:#161613;
border: solid 2px #8399AF;
overflow: hidden;
position: relative;
}
.boxgrid img{
position: absolute;
top: 0;
left: 0;
border: 0;
}
.boxgrid p{
padding: 0 10px;
color:#afafaf;
font-weight:bold;
font:10pt "Lucida Grande", Arial, sans-serif;
}

.boxcaption{
float: left;
position: absolute;
background: #000;
height: 100px;
width: 100%;
opacity: .8;
/* For IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80 );
/* For IE 8 */
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=8 0)";
}
.captionfull .boxcaption {
top: 260;
left: 0;
}
.caption .boxcaption {
top: 220;
left: 0;
}

</style>

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files...1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//To switch directions up/down and left/right just place a "-" in front of the top/left attribute
//Vertical Sliding
$('.boxgrid.slidedown').hover(function(){
$(".cover", this).stop().animate({top:'-260px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({top:'0px'},{queue:false,dura tion:300});
});
//Horizontal Sliding
$('.boxgrid.slideright').hover(function(){
$(".cover", this).stop().animate({left:'325px'},{queue:false,d uration:300});
}, function() {
$(".cover", this).stop().animate({left:'0px'},{queue:false,dur ation:300});
});
//Diagnal Sliding
$('.boxgrid.thecombo').hover(function(){
$(".cover", this).stop().animate({top:'260px', left:'325px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({top:'0px', left:'0px'},{queue:false,duration:300});
});
//Partial Sliding (Only show some of background)
$('.boxgrid.peek').hover(function(){
$(".cover", this).stop().animate({top:'90px'},{queue:false,dur ation:160});
}, function() {
$(".cover", this).stop().animate({top:'0px'},{queue:false,dura tion:160});
});
//Full Caption Sliding (Hidden to Visible)
$('.boxgrid.captionfull').hover(function(){
$(".cover", this).stop().animate({top:'160px'},{queue:false,du ration:160});
}, function() {
$(".cover", this).stop().animate({top:'260px'},{queue:false,du ration:160});
});
//Caption Sliding (Partially Hidden to Visible)
$('.boxgrid.caption').hover(function(){
$(".cover", this).stop().animate({top:'160px'},{queue:false,du ration:160});
}, function() {
$(".cover", this).stop().animate({top:'220px'},{queue:false,du ration:160});
});
});
</script>

</head>
<body>
<div class="boxgrid captionfull">
<img src="jareck.jpg"/>
<div class="cover boxcaption">
<h3>Jarek Kubicki</h3>
<p>Artist<br/><a href="http://www.nonsensesociety.com/2009/...jarek-kubicki/" target="_BLANK">More Work</a></p>
</div>
</div>

<div class="boxgrid caption">
<img src="kamil.jpg"/>
<div class="cover boxcaption">
<h3>Kamil Smala</h3>
<p>Artist<br/><a href="http://www.nonsensesociety.com/2009/...f-kamil-smala/" target="_BLANK">More Work</a></p>
</div>
</div>

<div class="boxgrid slideright">
<img class="cover" src="martin.jpg"/>
<h3>Martin Stranka</h3>
<p>Photographer<br/><a href="http://www.nonsensesociety.com/2009/...artin-stranka/" target="_BLANK">More Work</a></p>
</div>
<div class="boxgrid thecombo">
<img class="cover" src="florian.jpg"/>
<h3>Florian Nicolle</h3>
<p>Graphic Designer<br/><a href="http://www.nonsensesociety.com/2009/...orian-nicolle/" target="_BLANK">More Work</a></p>
</div>

<div class="boxgrid slidedown">
<img class="cover" src="nonsense.jpg"/>
<h3>The Nonsense Society</h3>
<p>Art, Music, Word<br/><a href="http://www.nonsensesociety.com" target="_BLANK">Website</a></p>
</div>
<div class="boxgrid peek">
<a href="http://feeds2.feedburner.com/buildinternet" target="_BLANK"><img src="birss.jpg"/></a>
<a href="http://www.buildinternet.com" target="_BLANK"><img class="cover" src="buildinternet.jpg"/></a>
</div>

</body>
</html>

Ik zoek dit script met spoed. Beloning: Goede fles champagne!

Tags voor dit bericht

Quick links

Sitedeals

Andere media

Over Sitedeals

Ik zoek dit script met spoed. Beloning: Goede fles champagne!

Tags voor dit bericht

Quick links

Sitedeals

Andere media

Over Sitedeals

Inloggen