我有这个jquery crossfade,大部分都在工作
除了看起来我需要使用live()函数,因为通过代码将“active”类添加到列表项元素中。
我不知道将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。
答案 0 :(得分:2)
无需live
。您只是在班级名称前面使用了额外的.
:
$('.photo-main ul .active').fadeOut(1000).removeClass('.active');
^
$('.photo-main ul li:eq('+next+')').fadeIn(1000).addClass('.active');
^
摆脱.
,你的代码应该可以正常工作。
答案 1 :(得分:0)
告诉您在此处尝试解决的问题并不容易,但此代码中的活动类不需要.live() is
,因为您没有运行涉及的选择器查询提前活动 - 您只需在需要时运行它们。这里提前运行的唯一选择器是指定单击处理程序并且不指定.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');
});