如何制作動畫 <div> 僅在另一個內部可見 <div>

Question

首先，感謝您在小組中接受我。 我需要有關jQuery動畫的問題的幫助。 這是我在此模板（模板怪獸）的導航菜單中的項目上發現的動畫。

http://www.templatemonster.com/demo/40492.html

顯然，這是兩個在畫布上移動並在某個點逐漸消失的圖像。

通過研究jQuery的示例，我看到部分效果是通過使用動畫屬性top（css）獲得的。 但是不幸的是，我制作的動畫元素並未逐漸消失，如鏈接中所示。

請幫助我了解如何使用jQuery達到相同的效果。

Answer 1

這是一個簡單的示例： http : //jsfiddle.net/qtdtL/ 。 注意帶有“ top”動畫的那個元素的位置是固定的。

$("nav").click(function() {
    var el = $(this);
    var elTop = el.position().top == 0 ? "-70px" : "0";
    el.animate({top: elTop});
});

Answer 2

基本上你添加

div
{
 transition: all 0.5s ease;
-webkit-transition: all 0.5s ease; /* Safari */
}

第一個屬性指示應在更改時進行哪些更改，第二個屬性指示應花費多長時間，第三個屬性指示定時，如果需要，還有第四個屬性可以延遲

Answer 3

您可以按照以下說明簡單地進行設置。

的CSS

@font-face {
  font-family: 'Six Caps';
  font-style: normal;
  font-weight: 400;
  src: local('Six Caps'), local('SixCaps'), url(http://themes.googleusercontent.com/static/fonts/sixcaps/v5/tMrhQDUBAHnnGuM33-yobPesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
.clear{clear:both;}
.nav{}
.menubox{width:200px;float:left;margin:0px 10px;height:80px;overflow:hidden;position:relative;font-family: 'Six Caps', sans-serif;line-height: 80px;color: #161616;font-size: 80px;color:#000;display:block;cursor:pointer;}
.menubox > span{width:100%;height:80px;display:block;position:absolute;text-align:center;}
.menubox > span.default-txt{top:0px;left:0px;}
.menubox > span.hover-txt{top:80px;left:0px;color:red;}

的HTML

<div class="nav">
    <a class="menubox">
        <span class="default-txt">menu</span>
        <span class="hover-txt">menu</span>
    </a>
    <a class="menubox">
        <span class="default-txt">menu</span>
        <span class="hover-txt">menu</span>
    </a>
    <a class="menubox">
        <span class="default-txt">menu</span>
        <span class="hover-txt">menu</span>
    </a>
    <a class="menubox">
        <span class="default-txt">menu</span>
        <span class="hover-txt">menu</span>
    </a>
    <div class="clear"></div>
</div>

jQuery的

$(document).ready(function(){
    $('.menubox').mouseenter(function(){            
        $(this).children('.default-txt').stop(true,true).animate({top:'-100px'});
        $(this).children('.hover-txt').stop(true,true).animate({top:'0px'});
    }).mouseleave(function(){
        $(this).children('.default-txt').stop(true,true).animate({top:'0px'});
        $(this).children('.hover-txt').stop(true,true).animate({top:'100px'});
    });
});

JSFiddle

工作演示