Question

I have a div which includes a bunch of sentences and another div which contains an image. When hovering on the sun, I want the words to come out from behind the sun and hovering out, go back into the sun. I don’t get the desired effect with .show() and .hide(). The words will keep on rotating while the sun is being hovered.

Here is the picture.

I am trying the implement whereas the words will appear from behind from the center of the sun and vice versa when hovering out.

Any idea how to implement the mentioned effect? Here is my current code. Thanks much!

$sun.hover(function(e) {
    $txt.show('slow');

    // text rotation
    var counter = 0;
    clearInterval(interval);
    interval = setInterval(function() {
        if (counter != -360) {
            counter -= 1;
            $txt.css({
                MozTransform: 'rotate(-' + -counter + 'deg)',
                WebkitTransform: 'rotate(-' + -counter + 'deg)',
                transform: 'rotate(-' + -counter + 'deg)',
            });
        }
    }, 20);

}, function(e) {
    clearInterval(interval);
    $txt.hide('slow');

});

Answer 1

using the css3 background-size :

jsBin demo

var $sun = $('#sun');
var $txt = $('#text');
var intvl;
var c = 0;

    $sun.hover(function(e){
      
        clearInterval(intvl);
        intvl = setInterval(function() {
            if (c != -360) {
                c += 1;
                $txt.css({
                    MozTransform: 'rotate(-'+c+'deg)',
                    WebkitTransform: 'rotate(-'+c+'deg)',
                    transform: 'rotate(-'+c+'deg)'
                });
            }
        }, 20);
      $txt.stop().animate({backgroundSize:'100%', opacity:'1'},700);
    }, function(){
        clearInterval(intvl);
        $txt.stop().animate({backgroundSize:'60%', opacity:'0.1'},400);
    });