jQuery UI button - Toggle Icon on Hover

Created For: http://stackoverflow.com/q/10902066/352449

by bizamajig

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.20/themes/base/jquery-ui.css">
<div>
    <button id="buttonid">And Action!</button> 
</div>

JavaScript

$(function() {
    $("#buttonid").button({
        icons: {
            primary: "ui-icon-play"
        }
    }).hover(function () {
        // hover in            
        $(".ui-button-icon-primary", this).toggleClass("ui-icon-pause ui-icon-play");
    }, function () {
        // hover out
        $(".ui-button-icon-primary", this).toggleClass("ui-icon-play ui-icon-pause");
    });
});