切換jQuery動畫無法正常工作

試圖對點擊進行簡單的動畫。當用戶單擊我希望面板滑出的選項卡時，我有一個隱藏在右側（絕對定位）的面板。我可以得到初始滑出工作，但不能得到切換到正常工作切換jQuery動畫無法正常工作

$('#sideTab').click(function() { 
      $('#sideCol').animate({'right':'0%'}) 
     }, function() 
      $('#sideCol').animate({'right':'-50%'})      
     }); 


$('#sideTab').toggle(function() { 
      $('#sideCol').animate({'right':'0%'}) 
     }, function() 
      $('#sideCol').animate({'right':'-50%'})      
     });

這些都不是工作

小提琴：http://jsfiddle.net/BQE32/1/

當綠色廣場點擊藍色方形應向左移動，當它再次點擊時它應該回到原來的位置

來源

2014-01-22 user934902

click不接受兩個回調函數，可以讀取right屬性並設置適當的值：

$('#sideTab').click(function() { 
    var $e = $('#sideCol'); 
    $e.animate({ 
     'right': $e.css('right') === '0px' ? '-50%' : '0px' 
    }); 
});

http://jsfiddle.net/Jrs36/

您還可以使用CSS transition財產和jQuery .toggleClass()方法：

CSS：

#sideCol { 
    -webkit-transition: right 400ms; 
    -moz-transition: right 400ms; 
    -o-transition: right 400ms; 
    transition: right 400ms; 
} 

#sideCol.right50 { 
    right: 50%; 
}

的JavaScript：

$('#sideTab').click(function() { 
    $('#sideCol').toggleClass('right50'); 
});

來源

2014-01-22 02:15:22 undefined

從來沒有見過這個寫過的，是'正確'行在essientially如果0做50％，否則做0px？ – user934902

@ user934902是的，它是這樣做的。 – undefined

你可以在這裏使用toggle()：

$('#sideTab').toggle(function() { 
    $('#sideCol').animate({'right':'0%'}) 
}, function() { 
    $('#sideCol').animate({'right':'-50%'}) 
});

Demo

來源

2014-01-22 02:16:00 Felix

如果沒有遷移插件，此版本的切換不再受支持 –

@ArunPJohny我們不知道OP的使用版本，即使他使用的是最新版本，儘管這仍然是一個有效的選項 – Felix

$('#sideTab').on('click', function() { 
    if ($(this).hasClass('toggled') === true) { 
     $(this).animate({'right': '-50%'}).removeClass('toggled'); 
    } else { 
     $(this).animate({'right': '0'}).addClass('toggled'); 
    } 
});

這將檢查側欄已經被「翻轉」，如果是將刪除類和動畫回出了框架（反之亦然）。

來源

2014-01-22 02:16:53 monners

切換jQuery動畫無法正常工作

回答

相關問題