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更改類動畫後不工作

回答

相關問題