jquery - 用 jquery 动画面板

Question

我正在尝试使用 jquery 制作动画面板，但我的代码无法正常工作，我需要您的帮助。这是我的代码：

jQuery('#style_selector .open').click(function() {
    jQuery('#style_selector').stop(true).animate({"left":"200px"});     
});
jQuery('#style_selector .open').click(function(){
    jQuery('#style_selector').stop(true).animate({"left":"-200px"});        
});

Answer 1

您只需要附加一个事件处理程序并在其中切换动画的方向。您还可以将选择器存储在变量中，以免一遍又一遍地重新查询它：

JavaScript

var container = $('#style_selector');

container.find('.open').click(function() {
    var direction = null;

    if (!container.data('open')) {
        direction = '+=';
        container.data('open', true);
    } else {
        container.data('open', false);
        direction = '-=';
    }

    container.stop(true).animate({ "left": direction + "200px" });
});

演示

先试后买