CODEWITHSUNDEEP
javascriptjqueryeventshover
user3235284
user3235284

Reputation: 21

Prevent specific function after event

Hey there i created this little fiddle:

http://jsfiddle.net/5H5Xq/17/

As you can see, its a quite good working example for sliding image´s.

But one thing is missing:

When i hover throw a paragraph, the "autoslide-function" should be disabled, that why i added this code to the hover-event:

event.preventDefault();

But the autoslide function is still processed, any advices?? need your help , GREETING´s !

Upvotes: 0

Views: 83

Answers (2)

aebabis
aebabis

Reputation: 3705

preventDefault refers to the default action of the browser. For example, the default action of a link is to go to a different page. Hover events have no default action, which explains why your preventDefault appears to do nothing. I think what you may mean to do is delay/kill the timer. Try this:

var i = 0, max = 3;
var interval;
function restart() {
    clearInterval(interval);
    interval = setInterval(function(event){
        $(".subbox1").each(function() {anim(this)});
        i = (i + 1) % max;
    }, 5000);
}

$(".slider").hover(function() {
    i = (i + 1) % max;
    restart();
    $(".subbox1").each(function() {anim(this)});
    event.preventDefault();
});

If the desired behavior is to prevent animation until mouseout, then you need to do this:

function anim(selector) {
    $(".images img", selector).first().appendTo($('.images', selector)).fadeOut(1000);  
    $(".images img", selector).first().fadeIn(1000);
}

// Untuk delay gambarnya
var i = 0;
var max = 3;
var interval;
function start() {
    clearInterval(interval);
    interval = setInterval(function(event){
        $(".subbox1").each(function() {
            anim(this);
        });
        i = (i + 1) % max;
    }, 5000);
}

function stop() {
    clearInterval(interval);
}

$(".slider").hover(function() {
    i = (i + 1) % max;
    $(".subbox1").each(function() {
        anim(this);
    });
    stop();
}, function() {
    start();
});

Also, since your animation function rearranges the DOM, you may want to devise a way to reference the images based on their original ordering. Otherwise, your hovering may not work as intended.

EDIT: In case the second example is unclear, the hover function can take a mouseleave function as its second parameter.

EDIT 2: I've fixed the syntax error in my code in case you still wanted to refer to it.

Upvotes: 1

Suman Bogati
Suman Bogati

Reputation: 6349

For this you need do clear interval by using Clearinterval(), because slide is happening through the Setinterval, something like this.

 // Untuk delay gambarnya

var i = 0, max = 3;
myFunction = function(event){
    $(".subbox1").each(function() {anim(this)});
    i += 1;
    if(i >= max) { i = 0; }
}
var interval = setInterval(myFunction, 1000);

$(".slider").hover(function() {
    clearInterval(interval);
    var img = $('<img>'); 
img.attr('src', $(this).attr('data-url'));
    $('#newImage').html(img);
    $('.images').hide();
    return false;
    i += 1;
   // $(".subbox1").each(function() {anim(this)});

});

$(".slider").mouseout(
    function (){
        $('.images').show();
       // $('#newImage').hide();
interval =   setInterval(myFunction, 1000);
    }
);

UPDATED DEMO

Demo

Upvotes: 1

Related Questions