jquery更改类动画后不工作

我认为我的问题很简单，但我不知道为什么我的jQuery不工作。我只想让导航从顶部滑入。通过再次点击navIcon按钮，应该隐藏导航并且按钮的类名应该再次改变。jquery更改类动画后不工作

这里是我的代码： jsfiddle

HTML

<div class="navIcon navIconInactive"></div> 
<div id="navWrapper"></div>

CSS

.navIconInactive { 
position: fixed; 
z-index: 4; 
width: 36px; 
height: 34px; 
top: 20px; 
right: 25px; 
cursor: pointer; 
background: green; 
} 
.navIconActive { 
position: fixed; 
z-index: 4; 
width: 36px; 
height: 34px; 
top: 20px; 
right: 25px; 
cursor: pointer; 
background: red; 
} 

#navWrapper { 
position: fixed; 
top: -70px; 
height: 70px; 
width: 100%; 
background: #333; 
z-index: 2; 
}

JQUERY

$('.navIconInactive').click(function() { 
    $('#navWrapper').animate({ 
     top: '0' 
    }, 250, function() { 
     // Animation complete. 
    }); 
    if ($('.navIcon').hasClass('navIconInactive')) { 
      $(this).removeClass('navIconInactive').addClass('navIconActive'); 
     } 
}); 

$('.navIconActive').click(function() { 
    $('#navWrapper').animate({ 
     top: '-70' 
    }, 250, function() { 
     // Animation complete. 
    }); 
    if ($('.navIcon').hasClass('navIconActive')) { 
      $(this).removeClass('navIconActive').addClass('navIconInactive'); 
     } 
});

来源

2014-09-24 schlawunzius

试试这个：你哈在动画结束之后已经到removeClass/addClass，因此将其放入动画功能中。
由于您正在使用class选择器绑定click活动/不活动div事件。但是，当您添加/删除类时，这些类选择器是动态可用的，因此可以像使用动态元素一样使用.on()来绑定单击事件。

$(function(){ 
    $(document).on("click",'.navIconInactive',function() { 
     var navIcon = $(this); 
     $('#navWrapper').animate({ 
       top: '0' 
     }, 250, function() { 
      $(navIcon).removeClass('navIconInactive').addClass('navIconActive'); 
     }); 
    }); 


    $(document).on("click",'.navIconActive',function() { 
     var navIcon = $(this); 
     $('#navWrapper').animate({ 
      top: '-70' 
     }, 250, function() {  
      $(navIcon).removeClass('navIconActive').addClass('navIconInactive'); 
     }); 
    }); 
});

Demo

来源

2014-09-24 13:04:51

'$（本）'后有生是'$（ '＃navWrapper'）'，而不是'$（ 'navIcon'）' – Niezborala 2014-09-24 13:25:16

感谢您的帮助。但你的jsfiddle也不起作用。当我再次单击navIcon按钮时，div应滑动到顶部：-70px – schlawunzius 2014-09-24 13:31:07

动画后进行。你只需要内部改变$(this)如果到$('.navIcon')

$('.navIconInactive').click(function() { 
    $('#navWrapper').animate({ 
     top: '0' 
    }, 250, function() { 
     // Animation complete. 
     if($('.navIcon').hasClass('navIconInactive')) { 
      $('.navIcon').removeClass('navIconInactive').addClass('navIconActive'); 
     } 
    }); 
}); 

$('.navIconActive').click(function() { 
    $('#navWrapper').animate({ 
     top: '-70' 
    }, 250, function() { 
     // Animation complete. 
     if ($('.navIcon').hasClass('navIconActive')) { 
      $('.navIcon').removeClass('navIconActive').addClass('navIconInactive'); 
     } 
    }); 

});

Demo

来源

2014-09-24 13:07:00 Niezborala

感谢您的帮助。但你的jsfiddle也不起作用。当我再次点击navIcon按钮时，div应该滑动到顶部：-70px – schlawunzius 2014-09-24 13:29:56

jquery更改类动画后不工作

回答

相关问题