目标:单击即可为 div 设置动画,而不仅仅是页面的初始加载。
问题:当我加载页面时,它的行为就像我想要的那样,但是当我再次尝试单击该元素时,它将不起作用——除非我两次单击该元素。有任何想法吗?
jQuery
$(document).ready(function() {
$('h1.slide1').live('click', function() {
$("div#slidebox1").animate({
top: -129
}, 300);
$("div#slidebox2").animate({
top: 115
}, 300);
$("div#slidebox3").animate({
top: 115
}, 300);
$(this).removeClass("slide1").addClass("selected");
});
$("h1.selected").live('click', function() {
$("div#slidebox1").animate({
top: 115
}, 300);
$(this).removeClass("selected").addClass("slide1");
});
$('h1.slide2').live('click', function() {
$("div#slidebox2").animate({
top: -129
}, 300);
$("div#slidebox1").animate({
top: 115
}, 300);
$("div#slidebox3").animate({
top: 115
}, 300);
$(this).removeClass("slide2").addClass("selected2");
});
});
CSS
#slidebox h1{
font-size:12px;
height:30px;
color:#212121;
font-weight:bold;
z-index:11;
cursor:pointer;
}