CODEWITHSUNDEEP
javascriptjqueryevent-handlinghover
GTS Joe
GTS Joe

Reputation: 4142

Using jQuery on() Instead of hover()

Per the standards, I'm trying to use jQuery's on() method as much as possible for my event handlers. Instead of hover(), I tried using on('hover') but it does not work. What can I do to make this bit of code work with on() instead of hover()? Is there a list of events I can see that work with the on() method?

$(document).ready(function(){
    $('#navigation li').on('hover', function(){
        $(this).animate({
            paddingLeft: '+=15px'
        }, 200);
    }, function(){
        $(this).animate({
            paddingLeft: '-=15px'
        }, 200);
    });
});

Upvotes: 1

Views: 11319

Answers (3)

Powerstone
Powerstone

Reputation: 106

Well, I'm late to the party but I think this should do

$(document).ready(function(){
$('#navigation li').on('mouseover', function(){
    $(this).animate({
        paddingLeft: '+=15px'
    }, 200);
}, function(){
    $(this).animate({
        paddingLeft: '-=15px'
    }, 200);
});

});

Upvotes: 0

George Houpis
George Houpis

Reputation: 1729

Well hover take two functions. On takes one.

$(document).ready(function(){
    $('#navigation li').on('mouseenter', function(){
        $(this).animate({
            paddingLeft: '+=15px'
        }, 200);
    });
    $('#navigation li').on('mouseleave', function(){
        $(this).animate({
            paddingLeft: '-=15px'
        }, 200);
    });
});

Upvotes: 1

Taplar
Taplar

Reputation: 24965

$('div')
  .on('mouseenter', function(){ $(this).addClass('red'); })
  .on('mouseleave', function(){ $(this).removeClass('red'); });
div {
  min-height: 50px;
  border: 1px solid #000;
}

.red { background-color: #F00; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div></div>

Upvotes: 6

Related Questions