JSFiddle - React, Tailwind, and code Playground

by jackrugile

HTML

<script src="http://jackrugile.com/jrumble/js/jquery.jrumble.1.3.js"></script>
<a href="http://twitter.com/andy_lamb"><img class="mouseoverwiggle" src="http://andylamb.net/templates/scarymonster2/images/btn_twitter_embossed.png"></a>
            <a href="http://www.flickr.com/photos/8491650@N06/"><img class="mouseoverwiggle" src="http://andylamb.net/templates/scarymonster2/images/btn_flickr_embossed.png"></a>
            <a href="http://www.mobypicture.com/user/andy_lamb"><img class="mouseoverwiggle" src="http://andylamb.net/templates/scarymonster2/images/btn_mobypicture_embossed.png"></a>
            <a href="http://twitpic.com/photos/andy_lamb"><img class="mouseoverwiggle" src="http://andylamb.net/templates/scarymonster2/images/btn_twitpic_embossed.png"></a>
            <a href="http://yfrog.com/user/andy_lamb/profile"><img class="mouseoverwiggle" src="http://andylamb.net/templates/scarymonster2/images/btn_yfrog_embossed.png"></a>
<a href="http://www.youtube.com/user/andylamb001"><img class="mouseoverwiggle" src="http://andylamb.net/templates/scarymonster2/images/btn_youtube_embossed.png"></a>

<ul class="menu">
<li class="item-101 current active"><a href="/" >Home</a></li><li class="item-107"><a href="/web-work" >Web Work</a></li><li class="item-104"><a href="/artwork" >Artwork</a></li><li class="item-103"><a href="/scary-monster" >Scary Monster</a></li><li class="item-102"><a href="/blog" >Blog</a></li><li class="item-113"><a href="/flash-vault" >Flash Vault</a></li><li class="item-106"><a href="http://328337.spreadshirt.net/" >Buy Stuff</a></li><li class="item-105"><a href="/about" >About</a></li></ul>

<img class="smreveal" id="sm_logo" src="http://andylamb.net/templates/scarymonster2/images/header_sm.png" alt="Home of Scary Monster" />

CSS

.smreveal {
    filter: alpha(opacity=0);        
    -mozOpacity: 0;            
    -khtmlOpacity: 0;            
    opacity: 0;    
}

JavaScript

/* It looks like you were using 1.1, which has a very different structure than the latest 1.3 of jRumble. Switch to 1.3, and the following bits should work for your situation. I only included the relevant HTML, CSS, JS for your situation here. If this isn't what you meant, let me know and we can figure it out. So, hover over scary monster in the nav and you will see it fade in, then rumble, then fade out. I set the timer to 1000 instead of 5000 for this demo so you can see it easier. Don't forget to delete your existing relevant JS code so that these don't conflict.  */

/* This defines the rumble rules for both your mouseover items and the scary monster reveal. Break these apart into two separate calls if you want custom options for both. */
$('.mouseoverwiggle, .smreveal').jrumble({    
    speed: 50,
    x: 1,    
    y: 1,    
    rotation: 1}
);

/* This will handle the hover triggers for the social images. The way you had it setup before works for version 1.1, but needs to be modified to this for version 1.3 of jRumble */
$('.mouseoverwiggle').hover(function(){
    $(this).trigger('startRumble');
}, function(){
    $(this).trigger('stopRumble');
});

/* This handles the remote triggering of the scary monster rumble. A little more complicated. Once the fadeIn is complete, the rumble starts. */
$('li.item-103 a').hover(function(){                
    $('.smreveal').stop().fadeTo(1000, 1, function(){
        $(this).trigger('startRumble');        
    });        
}, function(){ 
    /* This check is required since the stopRumble function, totally resets an element's opacity. If we don't check for this, it will flash full opacity for a second if you mouseout before the fadeIn is complete. */
    if($('.smreveal').css('opacity') >= 1){
        $('.smreveal').trigger('stopRumble');
    }        
    $('.smreveal').stop().fadeTo(1000, 0);      
});