0

我有这个大部分工作的jquery crossfade

除了似乎我需要使用 live() 函数，因为“活动”类正在通过代码添加到列表项元素中。

我不确定将 live() 函数放在我的代码中的哪个位置，所以它可以工作。

这是我的jQuery：

$('.photo-thumbs ul li a').click(function(e) {

    e.preventDefault();

    var next = $(this).parent('li').index();

    $('.photo-main ul .active').fadeOut(1000).removeClass('.active');
    $('.photo-main ul li:eq('+next+')').fadeIn(1000).addClass('.active');

});

这是我的html：

    <div class="photo-main">

        <ul>
        <li style="background-image: url(images/dummy1-l.jpg);"></li>
        <li class="active" style="background-image: url(images/dummy2-l.jpg);"></li>
        <li style="background-image: url(images/dummy3-l.jpg);"></li>
        <li style="background-image: url(images/dummy4-l.jpg);"></li>
        <li style="background-image: url(images/dummy5-l.jpg);"></li>
        </ul>

    </div>

    <div class="photo-thumbs">

        <ul>
        <li><a href="#" style="background-image: url(images/dummy1-s.jpg);"></a></li>
        <li><a href="#" style="background-image: url(images/dummy2-s.jpg);"></a></li>
        <li><a href="#" style="background-image: url(images/dummy3-s.jpg);"></a></li>
        <li><a href="#" style="background-image: url(images/dummy4-s.jpg);"></a></li>
        <li style="margin-right: 0px;"><a href="#" style="background-image: url(images/dummy5-s.jpg);"></a></li>
        </ul>

        <div style="clear: both;"></div>

    </div>

这是我的CSS：

.listing-page .left .photo-main {
    width: 630px;
    height: 350px;
    margin-bottom: 10px;
    position: relative;
}
.listing-page .left .photo-main li {
    width: 630px;
    height: 350px;  
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    background-repeat: no-repeat;
    background-position: center center;
    display: none;
}
.listing-page .left .photo-main .active {
    z-index: 2;
    display: block;
}
.listing-page .left .photo-thumbs li {
    margin-right: 10px;
    float: left;
}
.listing-page .left .photo-thumbs li a {
    display: block;
    width: 118px;
    height: 118px;
    -webkit-opacity: 0.75;
    background-repeat: no-repeat;
    background-position: center center;
}
.listing-page .left .photo-thumbs li a:hover {
    -webkit-opacity: 1.0;
}

似乎有一半的时间旧的LI没有淡出，有时它会切换到错误的LI。

4

2 回答 2

2

不需要live。您只是.在类名前面使用了一个额外的：

$('.photo-main ul .active').fadeOut(1000).removeClass('.active');
                                                       ^
$('.photo-main ul li:eq('+next+')').fadeIn(1000).addClass('.active');
                                                           ^

摆脱.s 并且您的代码应该可以正常工作。

于 2011-12-27T06:13:53.240 回答
0

在这里很难说出您要解决什么问题，但.live() is此代码中的活动类不需要，因为您没有提前运行涉及 .active 的选择器查询 - 您只在需要时运行它们. 在这里提前运行的唯一选择器是分配点击处理程序且未指定.active类的选择器。

如果您需要更具体的帮助，则必须澄清问题所在。

另外，.live()不再推荐。应该使用.on()(v1.7+) 或.delegate()(v1.7 之前)。

根据您对问题的澄清，我认为您只需要删除类名前面的句点，addClass()因此removeClass()代码如下所示：

$('.photo-thumbs ul li a').click(function(e) {

    e.preventDefault();

    var next = $(this).parent('li').index();

    $('.photo-main ul .active').fadeOut(1000).removeClass('active');
    $('.photo-main ul li:eq('+next+')').fadeIn(1000).addClass('active');

});
于 2011-12-27T06:04:31.870 回答