jQuery的动画条件W /回调函数

如何编写它完成时#contentBox动画#west动画通话？

基本上我有一个切换按钮，可以在第一次动画完成后动画/更改div的css，然后再转换到另一个div的css;然后在下一次执行切换时反转。

任何帮助表示赞赏。谢谢。

条件语句：

$("#menuToggle").click(
    function() { 

     var $west = $("#west"); 
     var $contentBox = $("#contentBox"); 

     $contentBox.animate({ 
       marginLeft : parseInt($contentBox 
         .css('marginLeft'), 10) == -320 
         ? $contentBox.outerWidth() 
         : -320 
     }); 

     $west.animate({ 
      left : parseInt($west 
       .css("left"), 10) == 0 
       ? -$west.outerWidth() 
       : 0 
     }); 
    });

我到老fashoned方式与出shorthanding条件语句

来源

2012-03-05 CelticParser

我重新编写了声明，所以它不是简写，它工作正常。

$("#menuToggle").click(

     function() { 
      //var n = $("#west"); 
      var position = $("#west").offset(); 

      if (position.left == "0") { 
       $("#west").animate({"left" : "-=300px"}, "slow") 
       .animate({"width" : "1%"}, "fast", 
        function() { 
        $("#contentBox").animate({"width" : "98%"}, "normal"); 
       }); 
      } else { 
       $("#contentBox").animate({"width" : "70%"}, "normal", 
        function() { 
        $("#west").animate({"width" : "30%"}, "fast") 
        .animate({"left" : "+=300px"}, "slow"); 
       }); 
      } 
     });

来源

2012-03-05 21:34:30 CelticParser

你总是可以传递一个回调函数的动画（）方法，它execuies一旦动画完成。

$("#menuToggle").click(
    function() { 

     var $west = $("#west"); 
     var $contentBox = $("#contentBox"); 

     $contentBox.animate({ 
       marginLeft : parseInt($contentBox 
         .css('marginLeft'), 10) == -320 
         ? $contentBox.outerWidth() 
         : -320 
     }, 5000, function() { 
      //this is the callback part 
      $west.animate({ 
       left : parseInt($west 
        .css("left"), 10) == 0 
        ? -$west.outerWidth() 
        : 0 
      }); 
     }); 

    });

来源

2012-03-05 20:42:07 Starx

Thx。多数民众赞成在我的想法，但当切换点击只有回调运行，然后如果切换再次点击，他们都运行，但不同步。 – CelticParser 2012-03-05 20:50:35

@Andaero，运行异步不是一个好的解决方案。为了完成动画效果，给予一点喘息空间不是更好。 – Starx 2012-03-05 20:58:37

haw我可以做到这一点？ thnx的帮助。 – CelticParser 2012-03-05 21:01:05

回调功能应该在这种情况下工作，但有一点要考虑的是，如果你已经动画到10×10盒（举例来说）你问jQuery的动画相同的10×10大小 - 看到的jQuery动画已经完成。所以在这种情况下，它会马上执行回调。我猜你的if块可能需要调整动画。

有一两件事你可以做的是增加您的onClick事件2状态检查，这样的事情：

http://jsfiddle.net/ufomammut66/YAVk4/

我建议你添加/删除类和检查类，来保持你的状态动画，但我做了这个快速和肮脏的XD。

来源

2012-03-05 21:28:34 ShortRound1911

jQuery的动画条件W /回调函数

回答

相关问题