mercredi 4 février 2015

jquery if/else check css marginLeft gives weird results

i'm working on a horizontal slide functionality wich gives me weird results.


the html:



<div class="packageSliderContainer borderTop">
<div class="slideContainer slide1"></div>
<div class="slideContainer slide2"></div>
<div class="slideContainer slide3"></div>
<div class="slideContainer slide4"></div>
<div class="slideContainer slide5"></div>
<div class="slideContainer slide6"></div>

<div id="slideArrowLeft"></div>
<div id="slideArrowRight"></div>
</div>


the css:



.packageSliderContainer {
width: 100%;
height: 982px;
overflow: hidden;
position: relative;
}

.slideContainer {
position: absolute;
width: 100%;
margin-left: 0px;
height: 100%;
}
.slide1 { background: #fe0000; left: 0%;}
.slide2 { background: #00fe00; left: 100%;}
.slide3 { background: #0000fe; left: 200%;}
.slide4 { background: #aaa000; left: 300%;}
.slide5 { background: #fff000; left: 400%;}
.slide6 { background: #bebebe; left: 500%;}

#slideArrowRight {
width: 37px;
height: 73px;
background: url(../images/arrow.png);
position: absolute;
right: 80px;
top: 50%;
cursor: pointer;
margin-top: -36px;
}

#slideArrowLeft {
width: 37px;
height: 73px;
background: url(../images/arrow.png);
position: absolute;
left: 80px;
top: 50%;
cursor: pointer;
margin-top: -36px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}


and the jquery:



$('#slideArrowLeft').click(function(){
var allSlides = $(this).siblings('.slideContainer');
var slideWidth = allSlides.width();

if ($(allSlides).css('marginLeft') <= "1px") {
$(allSlides).animate({marginLeft: "+=" + (slideWidth) + "px"});
}

else {
console.log("don't do stuffs");
};
});


i would suspect that you could not slide left on the first slide as the margin-left is 0, but for some reason you can slide to the left ONCE. and then the if selector works correct, but i completly don't understand why.


anybody here who can enlighten me on this case? (and as you guys might have noticed, pretty new to both javascript and jquery :D )


Aucun commentaire:

Enregistrer un commentaire