文章/答案/技术大牛

发布

社区首页 >问答首页 >hide、delay、fadeIn

问hide、delay、fadeIn
EN

Stack Overflow用户

提问于 2011-08-30 03:19:11

回答 8查看 3K关注 0票数 1

好的，所以我很难让它工作。什么都没发生。

view the code here，因为要复制的内容太多了。好吧..。它不是很多，但对这里来说太多了。

为了方便起见，我把它缩小了。有36个图像，但我只使用了一个包含6个图像的示例。

简而言之，我有一些正方形的图像，我需要在前一个淡入后开始淡入。天哪，这对我来说应该很简单...

谢谢。

$(document).ready(function() {
    setTimeout( function(){$("#slide1").hide().fadeIn(1000);}, 500);
    setTimeout( function(){$("#slide2").hide().fadeIn(1000);}, 700);
    setTimeout( function(){$("#slide3").hide().fadeIn(1000);}, 900);
    setTimeout( function(){$("#slide4").hide().fadeIn(1000);}, 1100);
    setTimeout( function(){$("#slide5").hide().fadeIn(1000);}, 1300);
    setTimeout( function(){$("#slide6").hide().fadeIn(1000);}, 1500);
});

<div style="display:none;"><img src="firstdate.jpg" /></div>
<div style="width:1000px; background-color:#666;margin-left:auto; margin-right:auto">
<div id="sliceContainer">
    <div class="sliceSpecs" id="slice1"></div>
    <div class="sliceSpecs" id="slice2"></div>
    <div class="sliceSpecs" id="slice3"></div>
    <div class="sliceSpecs" id="slice4"></div>
    <div class="sliceSpecs" id="slice5"></div>
    <div class="sliceSpecs" id="slice6"></div>
</div>
</div>

body {background-color:black}
#sliceContainer {width: 930px; height:930px; display:block; margin-left:35px; margin-right:35px}
.sliceSpecs {background:url(http://www.frankidollandthebrokentoys.com/123testing/firstdate.jpg);width:145px; height:145px; display:block; float:left; margin:5px}

#slice1 {background-position:0px 0px;}
#slice6 {background-position:145px 0px;}
#slice5 {background-position:290px 0px;}
#slice4 {background-position:435px 0px;}
#slice3 {background-position:580px 0px;}
#slice2 {background-position:725px 0px;}

jquery

delay

fadein

回答 8

Stack Overflow用户

回答已采纳

发布于 2011-08-30 03:23:29

尝试在JS框中执行此操作。HTML脚本标记在那里无效。首先隐藏所有.sliceSpecs，然后逐个显示它们。你还试图展示slide1等等。而不是slice1。

$(".sliceSpecs").hide();

setTimeout(function() {
    $("#slice1").fadeIn(1000);
}, 500);
setTimeout(function() {
    $("#slice2").fadeIn(1000);
}, 700);
setTimeout(function() {
    $("#slice3").fadeIn(1000);
}, 900);
setTimeout(function() {
    $("#slice4").fadeIn(1000);
}, 1100);
setTimeout(function() {
    $("#slice5").fadeIn(1000);
}, 1300);
setTimeout(function() {
    $("#slice6").fadeIn(1000);
}, 1500);

演示：http://jsfiddle.net/dRhHZ/4/

这里有一种更干净的做事方式。你不需要在javascript中创建元素，因为即使用户禁用了脚本，硬编码也能让它显示出来。

$(".sliceSpecs").hide().each(function(i) {
    var target = $(this);
    setTimeout(function() {
        target.fadeIn(1000);
    }, 200 * i);
});

每个演示：http://jsfiddle.net/dRhHZ/24/

票数 3

Stack Overflow用户

发布于 2011-08-30 04:49:30

奥拉奥拉..。抱歉来迟了。

THE DEMO FIDDLE

首先:您的HTML甚至可以看起来像这样：

<div style="display:none;"><img src="firstdate.jpg" /></div>
<div style="width:1000px; background-color:#666;margin-left:auto; margin-right:auto">
    <div id="sliceContainer">   
        <!-- FREE UP YOUR HTML, jQuery can do it for you! -->
    </div>
</div>

多亏了一个小技巧，它将为你克隆所有的元素：

///////// CLONE AND PREPEND SLICES! ////////////// 

var sliceS = $('<div class="sliceSpecs" class="slice" />');
for (var i = 0; i < 36; i++) { // 36 is 6*6 slices
    sliceS.after(sliceS.clone()).prependTo('#sliceContainer');
}

通过将所有切片显示为“0”来隐藏它们

///////// HIDE ALL SLICES ////////////////////////

$('.sliceSpecs').fadeTo(0,0);

你不需要这个乱七八糟的CSS：

#slice1 {background-position:0px 0px;}
#slice6 {background-position:145px 0px;}
#slice5 {background-position:290px 0px;}
... and so on .....

...cause jQuery可以为您设置css backgroundPosition：

//////// SET BACKGROUND POSITIONS ////////////////

$('.sliceSpecs').each(function(){       
   var sS = $(this);    
   sS.css({position:'relative'});
   var posX = (sS.position().top);
   var posY = (sS.position().left);
   sS.css({
       backgroundPosition : '-'+ posY +'px -'+ posX +'px'
   });   
});

在设置了你的背景位置之后，让我们来做一些反常的事情:我在这里使用了我正在工作的一个画廊中的脚本('WOWgallery!')。

它将通过分配类来创建对角线模式：

1  2  3  4  5  6
2  3  4  5  6  7
3  4  5  6  7  8
4  5  6  7  8  9
5  6  7  8  9  10
6  7  8  9  10 11  <-- you can get all class names visible by uncommenting a line in the code.

如果(例如)你遵循给定的类'6‘，你可以看到生成的对角线模式！

var c1 = 0；//慢计数器var c2 = 0；//快计数器var slX = 6；

$('.sliceSpecs').each(function() {
    var sl = $(this);
    c2++;
    if (c2 === (slX + 1)){
        c2 = 1;
        c1++;
    }
    sl.addClass('sl' + (c2 + c1));
   // sl.html(c2 + c1);  // !!! uncomment to test maximal c pattern value
});

又小又可爱，不是吗？

是时候添加一些超时动画了，对吧？：

var c = 0;
function an() {   

    timeOut = setTimeout(function() {
       c++;
        if(c === 12){c=0;return;} // IF c === the maximum c patt. value+1
       $('.sl' + c).fadeTo(700, 1);
        an();
    }, 200);
}

an();  // Do the animation

附言:我可以注释代码以帮助您理解。

希望你喜欢这个演示。

祝你编码愉快！

票数 2

Stack Overflow用户

发布于 2011-08-30 05:36:19

首先感谢你贴出这个问题，我学到了很多，在我继续为你做几个注释之前: 1.一般来说，将样式放在css中被认为是更好的实践2.在JSFiddle中，你不需要导入<script>你可以从侧边栏导入jquery 3.总是试着找到问题的逻辑，并明智而简洁地编写代码

这就是说，我想出了=)：

HTML：

<div id="container">
   <div id="sliceContainer"></div>
</div>

CSS：

body {background-color:black}

div#container{
    width:960px !important; height:960px;background:#2A2A2A;
    margin: 20px auto; padding:25px 0px 0px 20px;
}

#sliceContainer {height:900px;margin: 0 auto;}

.sliceSpecs { background:url(http://www.frankidollandthebrokentoys.com/123testing/firstdate.jpg);width:145px; height:145px;float:left; margin:5px;}

javascript：

$(document).ready(function() { for (i = 1; i <= 36; i++) {$("#sliceContainer").append($(document.createElement('div')).addClass("sliceSpecs").css('background-position', (((i - 1) % 6) * -145) + "px " + (parseInt((i - 1) / 6) * -145) + "px").fadeTo(0, 0).delay(((i-1)%6 + 1 + Math.floor((i-1)/6))*100).fadeTo(500, 1));}});

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/7234781

复制

相似问题

问hide、delay、fadeIn
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问hide、delay、fadeInEN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问hide、delay、fadeIn
EN