jQuery 使一个 div 出现在对象后面并返回到它的效果

Question

我有一个包含一堆句子的 div 和另一个包含图像的 div。当盘旋在太阳上时，我希望这些词从太阳后面出来并盘旋出去，回到太阳中。我没有使用 .show() 和 .hide() 获得所需的效果。当太阳悬停时，文字将继续旋转。

这是图片。

我正在尝试该工具，而当悬停在外面时，这些文字将从太阳中心的后面出现，反之亦然。

知道如何实现上述效果吗？这是我当前的代码。非常感谢!

$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

使用 css3 背景大小:

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);
    });