Question

单击淡入按钮时，它会向右移动，但不会同时淡入。我尝试了一个.fadeIn（）。animate（）的方法链，但所有这一切都先在div中淡出，然后将其动画到右边。我正在寻找一个平稳过渡。我能够在代码学校教程中为div设置动画，但不是我自己的。

这是我的代码：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <link href="css/style.css" media="screen" rel="stylesheet" type="text/css" 
              <title>DGI Supply - Home</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>

    <body>
        <button class="btn1">Fade In</button>
        <div id="fixedNavContainer" style="background:#487abe; width: 300px; position:relative;">
            <ul>
                <li>The DGI Supply Difference</li>
                <li>Productivity</li>
                <li>Vendors</li>
                <li>Automated Procurement Solutions</li>
                <li>Shop Our Products</li>
            </ul>
        </div>

        <div id="theDGISupplyDifference" class="mainContainer">
            <h1>The DGI Supply Difference</h1>
            <p>what is the DGI Supply Difference?</p>
            <div id="experienceCounts" class="subContainer">
                <h1>Experience Counts</h1>
                <p>This is why experience counts...</p>
            </div>
            <div id="sizeMatters" class="subContainer">
                <h1>Size Matters</h1>
                <p>This is why size matters...</p>
            </div>
            <div id="showMeTheMoney" class="subContainer">
                <h1>Show me the Money</h1>
                <p>This is how we show you the money...</p>
            </div>
            <div id="ourApproach" class="subContainer">
                <h1>Our Approach</h1>
                <p>This is our approach..</p>
                <div id="approach1" class="sub-subContainer">
                    <h1>Approach 1</h1>
                    <p>this is our first approach</p>
                </div>
                <div id="approach2" class="sub-subContainer">
                    <h1>Approach 2</h1>
                    <p>this is our second approach</p>
                </div>
                <div id="approach3" class="sub-subContainer">
                    <h1>Approach 3</h1>
                    <p>this is our third approach</p>
                </div>
                <div id="approach4" class="sub-subContainer">
                    <h1>Approach 4</h1>
                    <p>this is our fourth approach</p>
                </div>
            </div>
        </div>

        <div id="productivity" class="mainContainer">
            <h1>Productivity</h1>
            <p>How do we help you increase productivity?</p>
        </div>

        <div id="vendors" class="mainContainer">
            <h1>The DGI Supply Difference</h1>
            <p>what is the DGI Supply Difference?</p>
        </div>

        <div id="theDGISupplyDifference" class="mainContainer">
            <h1>Automated Procurement Solutions</h1>
            <p>what is APS?</p>
        </div>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <script src="js/application.js"></script>
    </body>
</html>

这是js：

$(function(){
     $(".btn1").click(function(){        
        $("#fixedNavContainer").animate({
           "opacity": 1,
        //added this line and set initial css property to opacity:0;
           "left": "50px"
         });
      });
    });

Answer 1

http://jsfiddle.net/isherwood/8u6WX/

$(function(){
 $(".btn1").click(function(){        
    $("#fixedNavContainer").animate({opacity: 1}, 1000);
  });
});

您的语法不正确。 animate方法采用数值而不是字符串，您需要提供持续时间。

http://api.jquery.com/animate/

无法在animate（）方法中获取opacity属性以使其正常工作

1 个答案: