Question

我有这段代码

 <div id="pic2" style="height:288px;background-repeat:no-repeat"  >
      <div id="pic" style="height:288px;background-repeat:no-repeat"  ><center>Please<br>This<br>Not Follow the Fade<br>Just Static</center></div>
</div>

详细信息：

http://jsfiddle.net/UC9d6/

我不希望div中的文本遵循JQuery淡入淡出。

感谢您的帮助

Answer 1

将文字放在另一个div中并绝对定位。

<div class="relative">
    <div class="fadein">
        <img src="http://workshop.rs/projects/jqfancytransitions/zakynthos_ivan_jekic.jpg" alt="" />
        <img src="http://workshop.rs/projects/jqfancytransitions/blue_window_igor_srdanovic.jpg" alt="" />
    </div>
    <div class="absolute static-text">
         Text goes here
    </div>
</div>


$(function(){
    $('.fadein img:gt(0)').hide();
    setInterval(function(){
      $('.fadein :first-child').fadeOut(2000)
         .next('img').fadeIn(2000)
         .end().appendTo('.fadein');}, 
      4000);
});


.fadein { position:relative; width:500px; height:332px; }
.fadein img { position:absolute; left:0; top:0; }

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.static-text {
    top: 20px;
    left: 0;
    width: 100%;
    text-align: center;
}

小提琴：http://jsfiddle.net/LHSRh/1/

jQuery在背景上淡出

1 个答案: