0

当用户单击如下链接时，我正在尝试切换动画：

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>

查询

$("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);
        });

但我不太确定如何去做，我希望当他们再次点击时它恢复到原来的状态。

4

2 回答 2

1

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

jQuery API

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

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

    <!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>
于 2013-02-22T08:33:26.540 回答
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/

于 2013-02-22T08:38:15.823 回答