Q:

Cleaner way to run multi-event function

I'm essentially hiding a form until the user hovers over the call to action piece of the UI, and then sliding the form in while simultaneously sliding the CTA out. Then if the user clicks on the form it stays on the screen until focus is left. Otherwise the elements return to their original state on mouseleave. The animations are all handled with CSS transitions and transforms via adding classes with the js. I've got it working fine, but the js feels a little wet to me so I was curious if there might be a cleaner way to write this? 
function fireNewsletter(){
    $('.newsletter-container').bind("mouseenter focus", function() { 
        $(".newsletter-cta").addClass('hiding'); 
        $(".newsletter-form").addClass('showing'); 
    }); 

    $(".newsletter-container").bind("mouseleave", function(){
        if ( ! $(".newsletter-input").is(":focus")) {
            $(".newsletter-cta").removeClass('hiding');
            $(".newsletter-form").removeClass('showing');
        }   
    });

    $(".newsletter-input").focusout(function(){
        $(".newsletter-cta").removeClass('hiding');
        $(".newsletter-form").removeClass('showing');
    });
}

A:

I would probably just go with moving the show/hide logic into descriptively named functions and caching the references to the elements. It doesn't make it much shorter but it will perform better and it reads easier.
function fireNewsletter(){

    var cta = $(".newsletter-cta"),
        form = $(".newsletter-form"),
        input = $(".newsletter-input"),
        container = $(".newsletter-container");

    function show () {
        cta.addClass('hiding'); 
        form.addClass('showing');
    }

    function hide () {
        if (!input.is(":focus")) {
            cta.removeClass('hiding'); 
            form.removeClass('showing');
        }
    }

    container.bind("mouseenter", show);
    container.bind("focus", show);
    container.bind("mouseleave", hide);
    input.bind("focusout", hide)
}

