CODEWITHSUNDEEP
jquery
maxelcat
maxelcat

Reputation: 1333

animation not very smooth

I have created a small slide show. However, it doesn't really look very smooth. How can I make the transitions look smoother?

Here's the relevant code. wod is a variable in this case 350px . tranSpeed is 1000 and is time for the animation to occur. I have tried setting this to different values, and still get the same jagged appearence.

$('#slideShowInner').stop(true,true).animate({'left':'-=' + wod}, tranSpeed, function (){ autoSlide = setTimeout(fred, slidetime) });

You can see what I mean at http://www.en2krew.com/clothing.html

Thanks

Here is the html code that is used:

<div id="slideShowWindow">
<div id="slideShowInner">    
<img src="images/clothingphotos/sonnytshirt.jpg" alt="" width="350" height="350" />
<img src="images/clothingphotos/bethtshirt.jpg" alt="" width="350" height="350" />
<img src="images/clothingphotos/mayaelliejesstshirt.jpg" alt="" width="350" height="350" />
<img src="images/clothingphotos/alfiemilessebtshirt.jpg" alt="" width="350" height="350" />
<img src="images/clothingphotos/geehat.jpg" alt="" width="350" height="350" />
<img src="images/clothingphotos/aaronhat.jpg" alt="" width="350" height="350" />
</div>
<div id="buttons">
<img id="clickPrev" src="images/prevButton.jpg" height="17" width="15" />  
<img id="clickNext" src="images/nextButton.jpg" height="17" width="15" />
<div id="pauseHolder">
<img class="clickMe" id="clickPause" src="images/pauseButton.jpg" height="17" width="15" />
</div>
<div class="clearer"></div>
<!-- buttons--></div>
<!-- slideShowWindow --></div>

Upvotes: 2

Views: 2758

Answers (4)

millebii
millebii

Reputation: 1287

I know it is an old question, but I found this tutorial very helpfull. Basically has to do with margins & padding

Upvotes: 0

maxelcat
maxelcat

Reputation: 1333

It wasn't the p tags issue although I took note of that for later jQuery thingies. There where no p tags in this project.

I figured it might be margins/padding - but still doing it when I took them off.

In the end I sort of "Gave up" with this. Its fine in everything - even IE9. In IE8 it cxould be taht I am looking on a laptop (albeit a good one, and FF, Saf etc are good...)

I decided to live with it.

Upvotes: 1

Barrie Reader
Barrie Reader

Reputation: 10713

[Answer overhaul]

I researched with me friend googles.

Turns out it could be IE, jQuery and <p> tags.

Change the <p>'s to something else.

Upvotes: 1

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114367

Try setting the left position to an absolute value instead of iterating in smaller increments:

$('#slideShowInner').stop(true,true).animate({
    'left':'=' + wodFinal //set final value and loop fewer times
}, tranSpeed, 'easingName', function (){ 
    autoSlide = setTimeout(fred, slidetime) 
})

Upvotes: 0

Related Questions