我找不到专门针对此的帖子(虽然我确定它存在且我找不到它。)
我拥有它,因此图片.regularpic
会切换整个特定div #title
,以便在点击时显示。有没有更有效的方法让我的代码重置其他类而没有所有这些行?
HTML就是这样:
<img src="images/wordpress.png" alt="" class="regularpic first" />
<img src="images/google.png" alt="" class="regularpic second" />
<img src="images/html5.png" alt="" class="regularpic third" />
<img src="images/adobe.png" alt="" class="regularpic fourth" />
<img src="images/jquery.png" alt="" class="regularpic fifth" />
THE JQUERY是这样的:
$(function() {
$(".first").click(
function() {
$(".second, .third, .fourth, .fifth").stop().animate({opacity:0.4 }, 500);
$(".first").stop().animate({opacity:1.0 }, 500);
$("#title2, #title3, #title4, #title5").stop()
.animate({opacity:0.0,
backgroundColor: '#fff',
color: '#fff',width: 580,
height:50}, 200);
$("#title1").stop().animate({opacity:1.0,
backgroundColor: '#fff',
color: '#000', width: 580,
height: 300 }, 600);
});
});
$(function() {
$(".first").click(
function() {
$(".first, .third, .fourth, .fifth").stop().animate({opacity:0.4 }, 500);
$(".second").stop().animate({opacity:1.0 }, 500);
$("#title1, #title3, #title4, #title5").stop()
.animate({opacity:0.0,
backgroundColor: '#fff',
color: '#fff',width: 580,
height:50}, 200);
$("#title2").stop().animate({opacity:1.0,
backgroundColor: '#fff',
color: '#000', width: 580,
height: 300 }, 600);
});
});
必须有一种更有效的方法吗?
答案 0 :(得分:1)
这可以为你做到:
HTML:
<img src="src" onClick="mypic('title1')" class="regularpic title1" />
<img src="src" onClick="mypic('title2')" class="regularpic title2" />
...
<img src="src" onClick="mypic('title5')" class="regularpic title5" />
JQuery:
var current = null;
function mypic(id) {
$('.regularpic').stop().animate({opacity:1.0 }, 500, function(){
$('.title').stop().animate({ opacity:0.0,
color: '#fff',
height:50}, 500, function(){
if(current !== id){
current = id;
$('.'+id).stop().animate({opacity:0.7 }, 500);
$("#"+id).stop().animate({opacity:1.0,
color: '#000',
height: 300 }, 500);
}
});
});
};
DEMO:
希望它有所帮助。
编辑:
您需要添加一个公共类:
#title1,#title2,#title3,#title4,#title5
在示例中:class="title"
答案 1 :(得分:0)
在动画之前使用stop()方法然后如果动画在元素上运行它将停止。
function() {
$(".first").stop().animate({opacity:0.7 }, 500);
$("#title1").stop().animate({opacity:1.0, backgroundColor: '#fff', color: '#000', width: 580, height: 300 }, 500);
},
function() {
$("#title1").stop().animate({opacity:0.0, backgroundColor: '#fff', color: '#fff', width: 580, height:50}, 500);
}