切换动画答案

【问题标题】：Toggle an animation切换动画
【发布时间】：2013-02-22 08:28:18
【问题描述】：

当用户点击这样的链接时，我正在尝试切换动画：

CSS

.men{
    background: url("../img/men4.jpg") no-repeat scroll 16% 0 transparent;
    height: 600px;
    left: 0;
    position: absolute;
    width: 50%;
}

.women{
    background: url("../img/women1.jpg") no-repeat scroll 84% 0 transparent;
    height: 600px;
    position: absolute;
    right: 0;
    width: 50%;
}

HTML

  <div class="men">
    </div> 
    <div class="women">
    </div> 
    <a href="#" class="openmen">Men</a>
    <a href="#" class="openwomen">Women</a>

JQUERY

$("a.openwomen").click(function(event){
                event.preventDefault();
            $('.women').animate({width:"80%"}); 
            $('.men').animate({width:"20%"});   
            $('.men').animate({opacity: 0.5}, 500); 
            $('.women').animate({opacity: 1}, 500);
        });

但我不太确定该怎么做，我希望它在他们再次点击时恢复到原来的状态。

【问题讨论】：

标签： jquery jquery-animate toggle

【解决方案1】：

试试这个：

var toggle=1;
$(function() {
    $("a.openwomen").click(function(event){
        event.preventDefault();
        if(toggle==1)
        {
            $('.women').animate({width:"80%"}); 
            $('.men').animate({width:"20%"});   
            $('.men').animate({opacity: 0.5}, 500); 
            $('.women').animate({opacity: 1}, 500);
        }
        else
        {
            $('.women').animate({width:"50%"}); 
            $('.men').animate({width:"50%"});   
            $('.men').animate({opacity: 0}, 500); //change opacity here as you want
            $('.women').animate({opacity: 0}, 500); //change opacity here as you want
        }
        toogle=(toggle==1) ? 2 : 1;
    });
});

更多关于动画http://api.jquery.com/animate/

【讨论】：

【解决方案2】：

您是否尝试过阅读 JQuery API 文档？

JQuery API

他们向您展示了一个简单的示例，说明如何使用 togle 而不是自己为每个组件制作动画。 /************* em>*************** em>*************** em>*********/

你为什么不试试这样的东西？

    <!DOCTYPE html>
      <html>
        <head>
         <style>
           div { background:#dad;
           font-weight:bold;
           font-size:16px; }
         </style>
         <script src="http://code.jquery.com/jquery-latest.js"></script>
        </head>
        <body>
        <a href="#">Toggle 'em</a>     
        <div class="toggle_class">Hiya</div>
        <div class="toggle_class">Such interesting text, eh?</div>
        <script>
        $("a").click(function () {
        $(".toggle_class").toggle("slow");
        });
        </script>
        </body>
      </html>

【讨论】：

当我添加切换时，链接似乎由于某种原因消失了。
尝试在每个 div 中添加一些东西，可能块没有被绘制；