Question

我整天都在反对这一切。我正在写这个小滑块/图像旋转脚本，我无法让它改变这些元素。我可以使用$('.slide:nth-child(1)').animate({display: 'block'});为控制台中的图像设置动画，但脚本中没有任何内容。

html

<div id="main">
    <div class="wrapper">
        <div class="slider">
            <div class="slide">
                <img src="/_site/images/interior-decor.jpg" />
            </div>
            <div class="slide">
                <img src="/_site/images/Showhome-Living-Room.jpg" />
            </div>
            <div class="slide">
                <img src="/_site/images/SL-Master-bedroom-1.jpg" />
            </div>
        </div>
    </div>
</div>

javascript

var sl = {} || [];
sl.imgs = $('.slide');
sl.cnt = 1;
sl.wait = 6000;
sl.num = sl.imgs.length;  //count length of .slide divs
//hide all but first image
$('.slide:nth-child(n + 2)').css('display', 'none');
//
sl.func = function() {
    var prev = sl.cnt;
    sl.cnt++;
    var next;
    if (sl.cnt > (sl.num)) {
       sl.cnt = 1;
       next = 1;
    }
    else {next = sl.cnt;}

    $('.slide:nth-child(' + next + ')').animate({display: 'block'});
    $('.slide:nth-child(' + prev + ')').animate({display: 'none'});
    console.log('Previous: '+prev+'  Next: '+next);
};
window.setInterval(function() {
    sl.func()
}, sl.wait);

脚本每六秒钟调出Previous: 1 Next: 2等等，但没有任何变化。

Answer 1

您无法为display属性设置动画。您可以为opacity或max-height设置动画：

$('.slide:nth-child(' + next + ')').animate({opacity: 1})
$('.slide:nth-child(' + prev + ')').animate({opacity: 0});

Jquery动画在控制台中工作，但不在脚本中

1 个答案: