Question

我喜欢这段代码：

<section id="banner">
  <img src="images/logo-senca.png" width="600px" height="230px">
    <a href="mens.html">
      <div id="gumb" class="one-third column">
         <p><input type="submit" value="Nakupuj" class="carrot-flat-button"></p>
      </div>
    </a>
   </div> <!-- is this wrong? -->
</section>

一旦网页加载就淡入或滑落，我不知道如何在jquery中这样做，所以任何帮助都会非常感激。提前谢谢。

更新

这里有横幅的CSS：

    #banner {
    background-attachment:  fixed;
    background-color: #e2e2e2;
    background-image:  url("images/bg.png");
    background-position:top center;
    background-repeat: repeat;
    background-size: cover;
    color: white;
    cursor: default;
    padding: 6em 0;
    text-align: center;
}

Answer 1

我刚从question找到了以下代码。积分归于真正写它的人。希望它有所帮助

$.fn.slideFadeToggle = function (easing, callback) {
 return this.animate({
    opacity: 'toggle',
    height: 'toggle'
 }, 'slow', easing, callback);
};

$('#banner').slideFadeToggle();

Demo

更新

$.fn.slideFadeToggle = function (speed, easing, callback) {
 speed = speed || 'slow';
 easing = easing || 'linear';

 return this.animate({
    opacity: 'toggle',
    height: 'toggle'
 }, speed, easing, callback);
};

Demo

旁注：您应首先使用display:none隐藏元素，以便它可以淡入。如果元素可见，则会淡出

Answer 2

这是一个简单的例子：

的jsfiddle：

http://jsfiddle.net/XBpmy/3

#banner p {
    opacity: 0;
    margin-top: 25px;
    font-size: 21px;
    text-align: center;
    -webkit-transition: opacity 2s ease-in;
    -moz-transition: opacity 2s ease-in;
    -o-transition: opacity 2s ease-in;
    -ms-transition: opacity 2s ease-in;
    transition: opacity 2s ease-in;
}
#banner p.load {
    opacity: 1;
}

JQuery的：

$("#banner p").addClass("load");

HTML：

<section id="banner">
    <p><img src="images/logo-senca.png" width="600px" height="230px" /></p> <a href="mens.html"><div id="gumb" class="one-third column">
    <p><input type="submit" value="Nakupuj" class="carrot-flat-button" /></p></div></a>
</section>

自动淡入动画

2 个答案:

Demo