Question

在移动网站上，我有一个导航图标（类：mob_navi_icon），点击该图标会将整个内容（id：content_wrapper）移动到左侧或将其移回。我＆＃39;试图用jQuery动画和切换来构建它。

我的jQuery：

 $('.mob_navi_icon').click(function() {
    $( "#content_wrapper" ).toggle(
       function() {
          $( this ).animate({ marginLeft: "-395px" }, "slow" );
       },
       function () {
          $( this ).animate({ marginLeft: "0" }, "slow" );
      })
})

不幸的是，这不起作用。感谢任何提示/帮助什么错误。

托马斯

Answer 1

据我所知，toggle函数不能像这样工作 - 它不接受两个函数作为参数。 toggle函数用于显示和隐藏匹配的元素。请参阅jQuery domuentation：

http://api.jquery.com/toggle/

但你可以自己实现它。一种可能性是使用像我在这里做的切换标志（多次单击该框）：

http://jsfiddle.net/YuKj3/1/

var box_toggle = false;
$("#box").click(function(){
    if(box_toggle = !box_toggle) {
        $( this ).animate({ left: "50px" }, "slow" );
    } else {
        $( this ).animate({ left: "0px" }, "slow" );  
    }
});

更新：哦，我看到toggle(handler1,handler2)曾经是jQuery中的事件绑定函数，但是在1.8版本中已弃用，在1.9中删除了。如果你正在使用更新的jQuery版本，这就是它无效的原因。

查询动画切换整个内容

1 个答案: