切換動畫

我想，當用戶點擊像這樣的鏈接切換的動畫：切換動畫

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

回答

相關問題