Beste SD'ers,
Ik loop tegen het volgende probleem: http://www.help4me.nl/test/
Hij moet als volgt werken: http://static.livedemo00.template-help.com/wt_36519/
Zoals u kunt zien, klopt het bij de hover van afbeelding 1 & 2 wel. Maar hij gaat fout bij 3 & 4. Mijn css:
mijn html code:#slideframe {width:640px; height:auto; float:left; border: 1px solid #9D9D9D; padding:3px;}
#inner1 {width:160px; height:410px; float:left; position:relative; background-image:url("..\\images\\parochie_1.png");}
#inner2 {width:160px; height:410px; float:left; position:relative; background-image:url("..\\images\\parochie_2.png"); }
#inner3 {width:160px; height:410px; float:left; position:relative; background-image:url("..\\images\\parochie_3.png"); }
#inner4 {width:160px; height:410px; float:left; position:relative; background-image:url("..\\images\\parochie_4.png");}
Mijn Jquery code:<div id="slideframe">
<div id="inner1" class="inner">
</div>
<div id="inner2" class="inner">
</div>
<div id="inner3" class="inner">
</div>
<div id="inner4" class="inner">
</div>
</div>
Ik hoop dat u de oplossing heeft.var tijd = 300;
var tijd_verklein = 100;
$("#inner1").mouseenter(
function(){
$(this).animate({ width: "640" }, tijd);
$("#inner2").animate({ width: "0" }, tijd_verklein);
$("#inner3").animate({ width: "0" }, tijd_verklein);
$("#inner4").animate({ width: "0" }, tijd_verklein);
});
$("#inner2").mouseenter(
function () {
$(this).animate({ width: "640" }, tijd);
$("#inner1").animate({ width: "0" }, tijd_verklein);
$("#inner3").animate({ width: "0" }, tijd_verklein);
$("#inner4").animate({ width: "0" }, tijd_verklein);
});
$("#inner3").mouseenter(
function () {
$(this).animate({ width: "640" }, tijd);
$("#inner1").animate({ width: "0" }, tijd_verklein);
$("#inner2").animate({ width: "0" }, tijd_verklein);
$("#inner4").animate({ width: "0" }, tijd_verklein);
});
$("#inner4").mouseenter(
function () {
$(this).animate({ width: "640" }, tijd);
$("#inner1").animate({ width: "0" }, tijd_verklein);
$("#inner2").animate({ width: "0" }, tijd_verklein);
$("#inner3").animate({ width: "0" }, tijd_verklein);
});
$(".inner").mouseleave(
function(){
$("#inner1").animate({ width: "160" }, tijd);
$("#inner2").animate({ width: "160" }, tijd);
$("#inner3").animate({ width: "160" }, tijd);
$("#inner4").animate({ width: "160" }, tijd);
});
met vriendelijke groet,
Tom Giesbergen.
-
10-11-2011, 19:12 #1
Particulier
- Berichten
- 877
- Lid sinds
- 15 Jaar
Jquery slider
-
-
10-11-2011, 19:35 #2
Particulier
- Berichten
- 449
- Lid sinds
- 14 Jaar
Re: Jquery slider
Ik heb absoluut niets met javascript, maar ik zie het zo:
Probeer de 2 tijdvariabelen eens gelijk te zetten... Je zorgt voor een mouseleave.
Hover op #3: 1+2 gaan in 100 ms van 160 naar 0, dus -320;
Hover op #3: 3 gaat in 300 ms van 160 naar 640, dus +480, dus in 100 ms +160 >> je gaat er weer af (op de eerste pixel links doet ie het wel)
Hover op #4: 1+2+3 gaan in 100 ms van 160 naar 0, dus -480;
Hover op #4: 4 gaat in 300 ms van 160 naar 640, dus +480, dus in 100 ms +160 >> je gaat er weer af (op de laatste pixel rechts doet ie het wel)
EDIT:
NVM! ik zit ff fout.....
Ik kijk nog ff
EDIT2:
Dit lijkt te helpen:
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .slide {position: relative;} #slideframe {width:640px; float:left; border: 1px solid #9D9D9D; padding:3px;} #slideframe2 {width:640px; height:410px; overflow:hidden;} #inner1 {width:160px; height:410px; float:left; position:relative; background:#FFCC00;} #inner2 {width:160px; height:410px; float:left; position:relative; background:#FF9933; } #inner3 {width:160px; height:410px; float:left; position:relative; background:#FFCC00; } #inner4 {width:160px; height:410px; float:left; position:relative; background:#FF9933;} </style> </head> <body> <div id="slideframe"><div id="slideframe2"> <div id="inner1" class="inner"> </div> <div id="inner2" class="inner"> </div> <div id="inner3" class="inner"> </div> <div id="inner4" class="inner"> </div> </div></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script> <script src="http://plugins.jquery.com/files/jquery.color.js.txt" type="text/javascript"></script> <script type="text/javascript"> var tijd = 500; var tijd_verklein = 500; var tijd_verklein2 = 50; $("#inner1").mouseenter( function(){ $(this).animate({ width: "640" }, tijd); $("#inner2").animate({ width: "0" }, tijd_verklein); $("#inner3").animate({ width: "0" }, tijd_verklein); $("#inner4").animate({ width: "0" }, tijd_verklein); }); $("#inner2").mouseenter( function () { $(this).animate({ width: "640" }, tijd); $("#inner1").animate({ width: "0" }, tijd_verklein); $("#inner3").animate({ width: "0" }, tijd_verklein); $("#inner4").animate({ width: "0" }, tijd_verklein); }); $("#inner3").mouseenter( function () { $(this).animate({ width: "640" }, tijd); $("#inner1").animate({ width: "0" }, tijd_verklein); $("#inner2").animate({ width: "0" }, tijd_verklein); $("#inner4").animate({ width: "0" }, tijd_verklein); }); $("#inner4").mouseenter( function () { $(this).animate({ width: "640" }, tijd); $("#inner1").animate({ width: "0" }, tijd_verklein); $("#inner2").animate({ width: "0" }, tijd_verklein); $("#inner3").animate({ width: "0" }, tijd_verklein); }); $(".inner").mouseleave( function(){ $("#inner1").animate({ width: "160" }, tijd); $("#inner2").animate({ width: "160" }, tijd); $("#inner3").animate({ width: "160" }, tijd); $("#inner4").animate({ width: "160" }, tijd); }); </script> </body> </html>Laatst aangepast door Marcel van Vrouwerf : 10-11-2011 om 20:29
