CODEWITHSUNDEEP
javascriptjqueryhover
Shniper
Shniper

Reputation: 854

How to prevent jquery hover effect from activating on and off hover

I'm using blast.js and my hover effect triggers when you move the mouse over the element and when you move it out of the element. I want it to behave like a normal hover effect. I know that the hover effect usually is set up like:

$('h1').hover(function(){
  //code here
}, function(){
  //code here
});

but I'm not sure what I would put in the second function when using blast.js, to prevent it from happening twice.

I have a fiddle, but I don't know how to make blast work on the fiddle.

DEMO

$(function() {

  $('h1').hover(function() {
    // Blasts the title
    var chars = $('h1').blast({
      delimiter: 'word'
    });
    // Animation character per character
    chars.each(function(i) {
      // Initialization of the position
      $(this).css({
        position: 'relative',
        left: 0
      }).delay(i * 45).animate({
        left: '50px'
      }, 300).delay(200).animate({
        left: 0
      }, 300);
    });
  });
});

Upvotes: 0

Views: 93

Answers (2)

Gabriel Erbetta
Gabriel Erbetta

Reputation: 66

You can use .mouseover() for when the cursor enters the object and .mouseout() for when the cursor leaves the object.

These are JQuery functions based on HTML events. There are also other events like mouseenter and mouseleave, you can find them in W3Schools.

Upvotes: 3

ibm701
ibm701

Reputation: 305

You should add param to your function:

$('h1').hover(function(e) { ... });

and call inside of the body:

e.preventDefault();

Upvotes: 0

Related Questions