切换动画

我想，当用户点击像这样的链接切换的动画：切换动画

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

但我不太确定如何去回合它，我希望它再次回到它原来的状态。

来源

2013-02-22 user1937021

您是否试过阅读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-22 08:33:26

当我添加切换的链接似乎消失出于某种原因。 – user1937021 2013-02-22 08:34:50

尝试在每个div内添加内容，也许该块未被绘制; – 2013-02-22 08:42:47

试试这个：

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

更多关于动画

来源

2013-02-22 08:38:15

回答

相关问题