0

Could you help me that, how can I stop this Interval when I mouseover #headline_image?

$("#headline li").live('mouseover', function() { 
var HL = $(this).attr("data-name"); 
$("#headline_image").html("<img src='" + HL  + "'>"); });

setInterval(function()
{ $('#headline li[data-id=' + count + ']').mouseover(); },4000); });

I tried as below in mouseover function; but it didnt work

clearInterval(function()  { $('#headline li').mouseover(); });
twlkyao
  • 14,302
  • 7
  • 27
  • 44
ersanyus
  • 103
  • 2
  • 9

2 Answers2

2

you need to use the reference returned by setInterval to clear it

var interval = setInterval(function () {
    $('#headline li[data-id=' + count + ']').mouseover();
}, 4000);

then 

clearInterval(interval)

also make sure the declare the variable interval in a scope shared by both these pieces of code

Arun P Johny
  • 384,651
  • 66
  • 527
  • 531
  • i couldnt start again via $("#headline li").live('mouseover', function() { clearInterval(interval); var HL = $(this).attr("data-name"); $("#headline_image").html(""); }, mouseleave: function(){ setInterval(interval); }); – ersanyus Dec 31 '13 at 00:40
1

You have to save the actual timerid from the setInterval() call and you pass that to clearInterval().

$("#headline li").live('mouseover', function() { 
    var HL = $(this).attr("data-name"); 
    $("#headline_image").html("<img src='" + HL  + "'>"); 
    clearInterval(timerId);
});

var timerId = setInterval(function() { 
    $('#headline li[data-id=' + count + ']').mouseover(); },4000); 
});

FYI, .live() has been deprecated since version 1.7 of jQuery and even removed from the latest versions of jQuery so you should be using .on() in the version 1.8 you are using.

If #headline is a static object (present initially and not recreated), then you could switch to .on() like this:

$("#headline").on('mouseover', "li", function() { 
    var HL = $(this).attr("data-name"); 
    $("#headline_image").html("<img src='" + HL  + "'>"); 
    clearInterval(timerId);
});

var timerId = setInterval(function() { 
    $('#headline li[data-id=' + count + ']').mouseover(); },4000); 
});

If #headline itself is dynamic, then change to:

$(static parent).on('mouseover', "#headline li", function() {

where you you replace static parent with a selector to the closest parent to #headline that is itself not dynamic.

For references on using .on() for dynamic elements see these references:

jQuery .on does not work but .live does

Does jQuery.on() work for elements that are added after the event handler is created?

Proper use of .on method in Jquery

Community
  • 1
  • 1
jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • how about start again on mouseout? – ersanyus Dec 31 '13 at 00:42
  • @RokoC.Buljan - `.live()` is deprecated as of 1.7. He should NOT be using it. – jfriend00 Dec 31 '13 at 00:43
  • dear friends, it didnt start again via this code: $("#headline li").on({ mouseenter: function () { clearInterval(interval); var HL = $(this).attr("data-name"); $("#headline_image").html(""); }, mouseleave: function(){ setInterval(interval); } }); – ersanyus Dec 31 '13 at 00:46
  • @user3147942 - please see what I've added to my answer. You need to use the dynamic form of `.on()`, not the static form. – jfriend00 Dec 31 '13 at 00:48
  • @user3147942 - yes, please read my answer - you are using the static way of using `.on()`, not the dynamic way. – jfriend00 Dec 31 '13 at 00:50
  • @user3147942 - I've added several references to my answer that help explain how to use `.on()` for dynamic elements. Please don't paste multiline code into comments because it isn't readable. I gave you an exact example in my answer for how to get the dynamic behavior with `.on()`. – jfriend00 Dec 31 '13 at 01:11