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>

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);
        });

でもどうしたらいいのかわからないので、もう一度クリックすると元の状態に戻してほしいです。

4

2 に答える 2

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 に答える
1

JQuery API ドキュメントを読んでみましたか?

JQuery API

各コンポーネントを自分でアニメーション化する代わりに、toogle を使用する方法の簡単な例を示します。/ * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * ** * *** /

このようなことを試してみませんか？

    <!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 に答える