Question

 <div class="container">
 <div class="page-header">
 <h1><strong>Manga To Read</strong></h1>
 </div>
 </div>
 <div class="container" id="manga">
 <div class="row">
 <!--One Piece-->
 <div id="firstStar" class="col-xs-12 col-sm-4 col-md-4">
 <a href="#">
 <img class="img-responsive img-thumbnail" src="http://img3.wikia.nocookie.net/__cb20130115020528/onepiece/images/0/0e/Volume_1.png" />
 </a>
 <h3><strong>One Piece</strong></h3>
 </div>
 <!--One Piece end-->
 <!--Bleach-->
 <div id="secondStar"class="col-xs-12 col-sm-4 col-md-4">
 <a href="#">
 <img class="img-responsive img-thumbnail" src="http://vignette2.wikia.nocookie.net/bleach/images/a/ad/MangaVolume1Cover.png/revision/latest?cb=20141201173531&path-prefix=en" />
 </a>
 <h3><strong>Bleach</strong></h3>
 </div>
 <!--Bleach end-->
 <!--Naruto-->
 <div id="thirdStar" class="col-xs-12 col-sm-4 col-md-4">
 <a href="#">
 <img class="img-responsive img-thumbnail" src="http://ecx.images-amazon.com/images/I/71T54zlToTL.jpg" />
 </a>
 <h3><strong>Naruto</strong></h3>
 </div>
 <!--Naruto End-->
 </div>
 </div>

Jquery的：

$(document).ready(function(){
$(window).scroll(function(){
    $("#firstStar").animate({left:200, opacity:"show"}, 1500);  
    $("#secondStar").animate({bottom:200, opacity:"show"}, 1500);
    $("#thirdStar").animate({right:200, opacity:"show"}, 1500);
 });

 });

滚动时这些图像重叠。我希望左边的图像从左边淡入，中间的图像从底部淡入，右边的图像从右边淡入。有帮助吗？ Demo

Answer 1

我不知道我是否理解所有。 Here是我的演示。

我更改了js并添加了一些css：

  $(document).ready(function(){
    $(window).scroll(function(){
        $("#firstStar").animate({left:0, opacity:"show"}, 1500);  
        $("#secondStar").animate({bottom:0, opacity:"show"}, 1500);
        $("#thirdStar").animate({right:0, opacity:"show"}, 1500);
    });

});

和

#firstStar{
    left: -200px;
}

#secondStar{
    bottom: -200px;
}

#thirdStar{
    right: -200px;
}

这三个图像在jquery效果上重叠

1 个答案: