Simple Slideshow on Hover, Slideshow stops on mouseleave

Question

This is my first post. My code works in chrome and safari, but the slideshow won't stop in firefox. I want to show a live version of this code to make it easier, but I'm working locally. I'm wondering if its because I wrote it with hover instead of mouseover and mouseleave, but I dont know how to write it out correctly that way. There may even be an error in this code, but the browser is not detecting it.

HTML:

<div class="fadelinks">

   <a href="#"> <img src=""/> </a>
   <a href="#"> <img src=""/> </a>
   <a href="#"> <img src=""/> </a>
   <a href="#"> <img src=""/> </a>

</div>

jQuery:

jQuery(document).ready(function($) {

$(".fadelinks").each(function(){
    var $this = this;
    $($this).hover(function(){

      $('> :gt(0)', $this).hide();
      timer = setInterval(function(){$('> :first- child',$this).fadeOut()
      .next().fadeIn().end().appendTo($this);}, 1500);
      }, function() {
      clearInterval(timer);

    });

  });


});

score 0 · Answer 1 · answered Mar 26 '14 at 02:31

a simpler way to achieve is to add onmouseover = "mouseoverFunction();" onmouseout = "mouseoutFunction()" to each img tag then in javascript mouseoverFunction()

loop through image array show next wait

mouseoutFunction() stop looping

you do not need the a tags

score 0 · Answer 2 · answered Mar 26 '14 at 03:24

well you want that on mouse hover your images start sliding here is another code i am not so good in jquery but here is the code:

css

   #fadelinks{
   width: 100px;
   height: 100px;
   overflow: hidden;
}

set your image height and width equal to the width and height of fadelinks

HTML

    <div class="fadelinks">

       <a id="same1" href="#"> <img src=""/> </a>
       <a id="same2" href="#"> <img src=""/> </a>
       <a id="same3" href="#"> <img src=""/> </a>
       <a id="same4" href="#"> <img src=""/> </a>

    </div>
<button onclick="slid1">image1<button>
<button onclick="slid2">image2<button>
<button onclick="slid3">image3<button>
<button onclick="slid4">image4<button>

jquery

 var slide1 = function(){

    $(document).ready(function(){
      $("#same1, #same2, #same3, #sam4").fadeout(100);$("#same1").fadeIn();
    });
}
  var slide2 = function(){

    $(document).ready(function(){
      $("#same1, #same2, #same3, #sam4").fadeout(100);$("#same2").fadeIn();
    });
} var slide3 = function(){

    $(document).ready(function(){
      $("#same1, #same2, #same3, #sam4").fadeout(100);$("#same3").fadeIn();
    });
} var slide4 = function(){

    $(document).ready(function(){
      $("#same1, #same2, #same3, #sam4").fadeout(100);$("#same4").fadeIn();
    });

you will understand what will this do but as i told you i am not so good in jquery so i have done this in you know in noob style. but from this you might get the idea and you can intregate this with event handler mousehover and mouseout and also use setinterval to slide automatically.

thanks.

Simple Slideshow on Hover, Slideshow stops on mouseleave

2 Answers2