CODEWITHSUNDEEP
javascripthtml
user3187075
user3187075

Reputation:

How to speed up images in this simple jscript slider on mouseover?

-------------- JavaScript Code -------------
$('.ppt li:gt(0)').hide();
$('.ppt li:last').addClass('last');
var cur = $('.ppt li:first');

function animate() {
    cur.fadeOut( 1000 );
    if ( cur.attr('class') == 'last' )
        cur = $('.ppt li:first');
    else
        cur = cur.next();
    cur.fadeIn( 1000 );
}


$(function() {
    setInterval( "animate()", 6000 );

} );
---------------- The End of JScript Code ---------

I hate JScript, please help!

------------------HTML Code ------------------------
<div id="slider">
<ul class="ppt">
    <li><img src="../Slider/Slika_1.jpg" alt="Projman 1"></img></li>
    <li><img src="../Slider/Slika_2.jpg" alt="Projman 2"></img></li>
    <li><img src="../Slider/Slika_3.jpg" alt="Projman 3"></img></li>
    <li><img src="../Slider/Slika_4.jpg" alt="Projman 4"></img></li>
    <li><img src="../Slider/Slika_5.jpg" alt="Projman 5"></img></li>
    <li><img src="../Slider/Slika_6.jpg" alt="Projman 6"></img></li>
</ul>
</div>

-------------------The End of HTML Code ----------------

I just need to make a hover effect that set an interval on 1000 when mouse over and bact to normal when mouse out, anyone? Help! Greetings!

Upvotes: 0

Views: 138

Answers (2)

zord
zord

Reputation: 4783

IMO the accepted answer is not working correctly.

  • The setInterval calls should use animate as a parameter, not animate().
  • You shouldn't put the mouse handling on the images, because when the image hides, it counts as a mouseleave, so the next image will be slow again, despite the mouse pointer is hovering the slider.
  • You also need to clear the previoulsy scheduled interval, when you set a new interval.
  • When you switch to 1000ms interval, you need to lower the fadein-fadeout intervals as well, so they fit in that 1000ms.

Here is my fiddle. It's longer, but it addresses these problems.

And here is a sliding variant.

Upvotes: 0

Kelly J Andrews
Kelly J Andrews

Reputation: 5111

I have a working jsFiddle for you to look at.

Jquery uses a .hover() function to allow you to pause and restart on the hover event. 

$('.ppt li:gt(0)').hide();
$('.ppt li:last').addClass('last');
var cur = $('.ppt li:first');
var nextSpeed = 6000;
var fadeSpeed = 1000;

function animate() {
    cur.fadeOut( fadeSpeed );
    if ( cur.attr('class') == 'last' )
        cur = $('.ppt li:first');
    else
        cur = cur.next();
    cur.fadeIn( fadeSpeed );
    timer = setTimeout(animate, nextSpeed);
}


$('#slider').hover(
    function() {
            if (nextSpeed != 1000) {
            if (timer) { 
                clearTimeout(timer); 
            }
            nextSpeed = 1000;
            fadeSpeed = 200;
            animate();
        }
    }, function() {
            nextSpeed = 6000;
            fadeSpeed = 1000;
    }
);

$(function() {
    animate();
} );

This should get you where you need to be.

Edit Updated fiddle to account for the issues stated. Hover is still the appropriate choice. Sorry I didn't spend much time the first go - should work better now.

Side Note - there are plugins that do this much better - may want to investigate those.

Upvotes: 1

Related Questions