按顺序对图像应用效果

发布于 2024-12-13 07:53:58 字数 1735 浏览 0 评论 0原文

我今天早上开始使用 jQuery（所以我是个菜鸟），一开始看起来很有希望，但后来这个......

这个想法是一个接一个地延迟淡入和淡出图像。但它们都是同时淡入然后淡出。我希望他们一个接一个地这样做。

尝试修改单个标记，然后用 html() 填充

，然后是这个和其他一些东西。这可能是小菜一碟，但我就是看不到！

<html>
<head>
<style type="text/css">

    span.button{
        display:block;
        width:10px;
        border:1px solid;
        float:left;
        background:#eeeeee;
        padding:5px;
        margin:5px;
        font-weight:bold;
        color:#333333;
        cursor:pointer;
        border-radius:7px;
        border-color:#555555; 
        box-shadow: 0px 0px 2px #777777;
    }

img.gImages{
    border:1px solid;
    border-left-color:#eeeeee;
    border-top-color:#eeeeee;
    border-right-color:#666666;
    border-bottom-color:#666666;
    border-radius:5px;
    height:300px;
    box-shadow: 0px 0px 5px #777777;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var numOfimgs=3;
$(document).ready(function(){

function preloadImages(numOfimgs){
    var i=0;
    for(i=1; i<numOfimgs+1; i++){
        $("div").append('<img class="gImages" id="'+i+'slika" src="'+i+'.jpg" />');
        $("img#"+i+"slika").hide();
        $("div").append(i);
    }
}
preloadImages(numOfimgs);

function animateImage(imgId){
    $("img#"+imgId+"slika").fadeIn("slow");
    $("img#"+imgId+"slika").fadeOut("slow");
}

function startAnimation(){
var i=0;
for(i=1; i<numOfimgs+1; i++){
    animateImage(i);
    }
}

startAnimation();
});
</script> 
</head>

<body>
<div></div>
<span>below the div</span>
</body>
</html>

原文

I started jQuery this morning (so I'm a noob) and it seemed promising at first but then this...

The idea is to fade in and fade out images one after another with a delay. But they all are faded in at the same time and then faded out. I want them to do that one after another.

Tried modifying the single <img> tag, then filling with html() a <div>, then this and couple other things. This might be a piece of cake but I just don't see it!

<html>
<head>
<style type="text/css">

    span.button{
        display:block;
        width:10px;
        border:1px solid;
        float:left;
        background:#eeeeee;
        padding:5px;
        margin:5px;
        font-weight:bold;
        color:#333333;
        cursor:pointer;
        border-radius:7px;
        border-color:#555555; 
        box-shadow: 0px 0px 2px #777777;
    }

img.gImages{
    border:1px solid;
    border-left-color:#eeeeee;
    border-top-color:#eeeeee;
    border-right-color:#666666;
    border-bottom-color:#666666;
    border-radius:5px;
    height:300px;
    box-shadow: 0px 0px 5px #777777;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var numOfimgs=3;
$(document).ready(function(){

function preloadImages(numOfimgs){
    var i=0;
    for(i=1; i<numOfimgs+1; i++){
        $("div").append('<img class="gImages" id="'+i+'slika" src="'+i+'.jpg" />');
        $("img#"+i+"slika").hide();
        $("div").append(i);
    }
}
preloadImages(numOfimgs);

function animateImage(imgId){
    $("img#"+imgId+"slika").fadeIn("slow");
    $("img#"+imgId+"slika").fadeOut("slow");
}

function startAnimation(){
var i=0;
for(i=1; i<numOfimgs+1; i++){
    animateImage(i);
    }
}

startAnimation();
});
</script> 
</head>

<body>
<div></div>
<span>below the div</span>
</body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

预谋 2024-12-20 07:53:58

怎么样：

function sequencedFade(imgIndex, numImages) {
    if(imgIndex <= numImages) {
        //... your other random stuff here
        $("#"+imgIndex+"slika").fadeOut('slow', function() { sequencedFade(imgIndex++, numImages) });
        //... more other random stuff
    }
}

sequencedFade(0, 3);

这使用了 fadeOut 的回调函数，该函数在动画完成时执行。

http://jsfiddle.net/9KYqJ/

How about this:

function sequencedFade(imgIndex, numImages) {
    if(imgIndex <= numImages) {
        //... your other random stuff here
        $("#"+imgIndex+"slika").fadeOut('slow', function() { sequencedFade(imgIndex++, numImages) });
        //... more other random stuff
    }
}

sequencedFade(0, 3);

This uses the callback function of fadeOut which is executed upon animation completion.

http://jsfiddle.net/9KYqJ/

回复收藏 0 原文

浅紫色的梦幻 2024-12-20 07:53:58

试试这个：

淡入和淡出图像，直到所有图像淡入和淡出

function animateImage(imgId){
     if($("img#"+imgId+"slika").length <> 0)
     {
         $("img#"+imgId+"slika").fadeIn("slow", function(){
              $("img#"+imgId+"slika").fadeOut("slow", function(){ animateImage(imgId + 1);});
         });
     }

}

function startAnimation(){

       animateImage(0);

}

据您所知，我使用淡入和淡出的第二个参数，它是回调，在动画完成时执行此函数

Try this :

FadeIn and fadeOut image until you have fadein and fadeout all images

function animateImage(imgId){
     if($("img#"+imgId+"slika").length <> 0)
     {
         $("img#"+imgId+"slika").fadeIn("slow", function(){
              $("img#"+imgId+"slika").fadeOut("slow", function(){ animateImage(imgId + 1);});
         });
     }

}

function startAnimation(){

       animateImage(0);

}

And for your knowledge, I'm using the second parameter of fadeIn and fadeOut, it's the callback, do this function when the animation is finish

回复收藏 0 原文

~没有更多了~