如何fadeIn和fadeOut div中的所有元素(jquery)

时间:2011-08-29 23:27:22

标签: jquery gallery

如何在div中使用FadeIn和fadeOut img标签使用Jquery

sample:

<div class='myDivgallery' >
<img style="display: none;" src="images/1.jpg" />
<img style="display: none;" src="images/2.jpg" />
<img style="display: none;" src="images/3.jpg" />
<img style="display: none;" src="images/4.jpg" />
</div>

我必须制作一个幻灯片画廊,但是,我不使用插件。

感谢

2 个答案:

答案 0 :(得分:2)

$('.myDivgallery img').fadeIn('slow'); // fade in 

$('.myDivgallery img').fadeOut('slow'); // fade out

答案 1 :(得分:2)

Erfan ...如果你想要一个SLIDE画廊而不是:SLIDE GALLERY

如果你想要你想要的东西(; D)而不是尝试:

修改 由于一个众所周知的jQuery票证导致的错误,我想出了这个演示:

SIMPLE FADE GALLERY

var el = $('.myDivgallery img');
var z = 1;
$(el[0]).show();
function loop(ev) {
    el.siblings().delay(1000).fadeOut(300).eq(z).fadeIn(500, function() {
        check = z != el.length-1 ? z++ : z=0;
        loop();         
    });
}
loop();

(感谢社区为我之前的演示没有为我烹饪 maccaroni pasta al pesto :D)
(并且不要问我为什么我调用var {z“实际执行c次安装”

<小时/> 旧版本在页面/标签缺失时创建了动画累积
(我将其留在这里只是为了“不良做法/示例”。)

ERRATA fade gallery

$('.myDivgallery img:eq(0)').show(); // show first image on page load

var imgC = 0;   // set counter to '0'

function fade() {   // introduce our function

    var img = $('.myDivgallery img');
    var imgL = img.length;    // get the number of images

    timeout = setTimeout(function() {
        imgC++;      // count +1
        img.eq(imgC-1).fadeIn().siblings('img').fadeOut();
        if ( imgC >= imgL){ // if counter goes over our number of images...
            imgC = 0;       // reset the counter to '0'
        }
        fade();             // run our function in a loop
    }, 2000);               // timeout delay

}
fade();                     // start our function

再次阅读...... B. A. D. ......!糟糕坏事