Question

我有以下代码：

<div id="slideshow" >
    <div class="check">
        <img src="images/slideshow/image01.jpg" alt="Slideshow Image 1" />
    <p>Some paragraph</p>
    </div>    
    <div>
        <img src="images/slideshow/image02.jpg" alt="Slideshow Image 2" />
        <p>Some paragraph</p>
    </div>
    <div>
        <img src="images/slideshow/image03.jpg" alt="Slideshow Image 3" />
        <p>Some paragraph</p>
    </div>
</div>

我发现这个幻灯片方法使用以下代码将DIV相互淡入和淡出以创建一种图像幻灯片::

function slideSwitch() {

var $active = $('#slideshow DIV.check');

if ( $active.length == 0 ) $active = $('#slideshow DIV:last');

var $next =  $active.next().length ? $active.next()
    : $('#slideshow DIV:first');

$active.addClass('last-active');

$next.delay(2000)
    .css({opacity: 0.0})
    .addClass('check')
    .animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('check last-active');
    });
}

$(function() {setInterval("slideSwitch()", 8000);});

正如您所看到的，它增加了“检查”类，它在DIV中消失。我正在尝试做的是当slideSwitch函数将类“check”添加到Div时，使用Jquery检查，然后执行某些操作。我试过这个，但它不起作用：

if ($("#slideshow > div:nth-child(2)").hasClass('check')) {
    $("#slideshow > div:nth-child(2)").animate({marginTop: "-50px"}, 5000);
} else {
//Do nothing
}

如果我只检查第一个孩子或者我只是添加它（可能是因为它已经在HTML代码中定义了类），它是有效的：

if ($("#slideshow DIV").hasClass... etc

然后动画马上开始，当我真正想要的是它在第二个DIV已经在JavaScript中分配了类“check”之后立即开始。请帮忙!!!!!

Answer 1

在上面的代码中调用时，会立即添加该类。为什么不在那里包含你的动画？

$next.delay(2000)
    .css({opacity: 0.0})
    .addClass('check')
    .animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('check last-active');
        $("#slideshow > div:nth-child(2)").animate({marginTop: "-50px"}, 5000);

    });
}

检查Jquery何时分配了一个类，然后执行某些操作

1 个答案: