jQuery jRumble Plugin - Rumble on Hover

Question

I am using the jquery jRumble plugin. I would like to hover over the h3 wrap and rumble the image

here is my HTML:

<div class="b-wrap cf">
<div class="b">
    <img src="#" alt="Zermatt Icon" />
</div>
<div class="b-r two">
    <h3><a href="#">Zermatt</a></h3>
</div>
</div>

here is my jquery:

$(document).ready(function() {

$( ".b-r" ).hover(function() {

    $('.b img').jrumble({
        x: 2,
        y: 2,
        rotation: 1,
    speed: 75
    });

    $('.b img').hover(function() {
        $(this).trigger('startRumble');
    }, function() {
        $(this).trigger('stopRumble');
    });
});
});

I must be missing the obvious, your input is much appreciated.

Cheers.

Answer 1

The problem is you are triggering functon on $('.b-r') instead of $('.b img')

$(document).ready(function () {
   $('.b img').jrumble({
      x: 2,
      y: 2,
      rotation: 1,
      speed: 75
    });

    $('.b-r').hover(function () {
       // here $(this) refers to $('.b-r') 
       $('.b img').trigger('startRumble');
       }, function () {
            $('.b img').trigger('stopRumble');
    });
});

Answer 2

$(document).ready(function() {

   $('.b img').jrumble({
        x: 2,
        y: 2,
        rotation: 1,
    speed: 75
    });

   $('.b-r').hover(function() {
        $('.b img').trigger('startRumble');
    }, function() {
        $('.b img').trigger('stopRumble');
    });

});