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

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

jquery

jQuery使一个div出现在一个对象后面并返回到它的效果中,jquery,Jquery,我有一个div，其中包括一堆句子和另一个div，其中包含一个图像。当我在太阳上盘旋的时候，我想让文字从太阳后面出来，然后盘旋出来，回到太阳里。我使用.show（）和.hide（）没有达到预期效果。当太阳在空中盘旋时，文字将继续旋转这是照片我正在尝试这个工具，而文字会从太阳中心的后面出现，反之亦然你知道如何实现上述效果吗？这是我目前的代码。多谢 $sun.hover(function(e) { $txt.show('slow'); // text rotation

我有一个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');

});

使用css3

背景尺寸

：

z-index属性在这里可能很有用

在下面的简单示例中，文本最初设置在图像后面。当鼠标悬停在图像上时，文本的z索引值将上移


函数showCaption（）{
$（“.caption”）.css（“z-index”，“3”）；
}
函数hidecation（）{
$（“.caption”）.css（“z-index”，“1”）；
}
#容器{位置：相对；}
.image{位置：固定；顶部：0px；左侧：0px；z索引：2；}
.caption{位置：固定；顶部：0px；左侧：0px；z索引：1；}
这里和这里有些文字。

理论上，这些单词需要嵌套在一个div中，该div位于中心（边距：0 auto），其宽度和高度将小于太阳的大小（垂直或水平），悬停太阳将激活。悬停方法并将div元素的宽度+高度设置为大于默认值。。悬停时，将高度和宽度重置为正常值。我没有尝试过，但请告诉我是否有效

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

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
    <script type="text/javascript">
       function showCaption(){
          $(".caption").css("z-index","3");
       }
       function hideCaption(){
          $(".caption").css("z-index","1");
       }
    </script>

    <style type="text/css">
        #container{ position:relative; }
        .image{ position:fixed; top:0px; left:0px; z-index:2; }
        .caption{ position:fixed; top:0px; left:0px; z-index:1; }
    </style>
</head>

<body>
    <div id="container">
        <div class="image" onmouseover="showCaption();" onmouseout="hideCaption();">
            <img src="bill-gates-ms.jpg" />
        </div>
        <div class="caption">
            Some text here and here.
        </div>
    </div>

</body>
</html>