CODEWITHSUNDEEP
jqueryhtmlcssslider
M1lls
M1lls

Reputation: 593

Smooth out jQuery Slideshow

I have a simple image slider the loops through multiple images on hover. The problem is that it is very choppy. The reason being is that the is a static image that is visible before the hover state and hidden on hover. This makes the image cycle choppy. I am just looking for a way to smooth out the cycle.

Or I just need to find a way for the static image to disappear on hover and reappear when the mouse leaves the div/image.

I have a demo below

JS Fiddle Demo

jQuery code

jQuery(function($){

// Cycle plugin
$('.slides').cycle({
    fx:     'none',
    speed:   1000,
    timeout: 70
}).cycle("pause");

// Pause & play on hover
$('.slideshow-block').hover(function(){
    $(this).find('.slides').addClass('active').cycle('resume');
}, function(){
    $(this).find('.slides').removeClass('active').cycle('pause');
});

});

The static image is on line #20 in the css

Upvotes: 1

Views: 146

Answers (1)

Trevor
Trevor

Reputation: 16116

Well doing what you said, hiding the image when hovering and then showing the image again after seems to fix the problem.

jQuery(function($){

// Cycle plugin
$('.slides').cycle({
    fx:     'none',
    speed:   1000,
    timeout: 70
}).cycle("pause");

// Pause & play on hover
  $('.slideshow-block').hover(function(){
      $(this).find('.link').hide();
    $(this).find('.slides').addClass('active').cycle('resume');
  }, function(){
      $(this).find('.link').show();
      $(this).find('.slides').removeClass('active').cycle('pause');
  });

});

http://jsfiddle.net/WCTX8/2/

Upvotes: 1

Related Questions