$('#SiteDescriptions' + i).animate({opacity: "1"}, 500);
$('#SiteDescriptions' + !i).animate({opacity: "0"}, 500);
答案 0 :(得分:4)
不要使用id并依赖选择器。而是使用类:
$SD = $('.SiteDescription'); // cache jquery object
$SD.on('click',function(){
// fade out all with this class
$SD.stop().animate({opacity:0},500);
// fade in new active element
$(this).stop().animate({opacity:1},500);
});
如果您尝试选择除该ID之外的任何内容,您将选择页面上不是它的每个元素。而且我认为这不是你想要的。
不要这样做,按照课程方式进行,但这更接近你的要求:
$('#SiteDescriptions'+i).animate({opacity : 1 },500)
// I don't want to speculate on your dom structure, but if you are using id's
// you still need a way to prevent from fading out everything on the page that
// isn't the new action. So I am assuming that all the #SiteDescriptions are siblings
.siblings().not('#SiteDescriptions'+i).animate({opacity: 0}, 500);
答案 1 :(得分:1)
i
为boolean
,请使用三元运算符$('#SiteDescriptions' + i).animate({opacity: (i) ? "1" : "0" }, 500);
答案 2 :(得分:1)
我认为这就是你想要的:
$('#SiteDescriptions' + i).animate({opacity: "1"}, 500);
$('[id^=SiteDescriptions]').not($('#SiteDescriptions' +i)).animate({opacity: "0"}, 500);
答案 3 :(得分:1)
可以使用startsWith
选择器和not()
。此外,fadeIn
和fadeOut
与不透明度的animate
相同
var site = $('#SiteDescriptions' + i).stop(true,true).fadeIn( 500);
$('div[id^="SiteDescriptions"]').not(site).stop(true,true).fadeOut(500)
也不确定动画的三部曲...如果在同一个元素上调用另一个动画时正在进行动画的可能性,请使用stop()