jquery + css在瀏覽器問題中動畫

Question

我是js的新手，並且希望在頁面上有兩個動畫菜單。
我在這裏有一個例子，但有2個問題。
http://jsfiddle.net/misemefein/k3dKz/5/

1：我希望菜單div在頁面加載時不在屏幕上，並在相關的點擊中滑動。
 它目前是相反的。
2：動畫工作中的jsfiddle，但沒有一個測試頁面的瀏覽器：http://bit.ly/M7TZrt

任何想法表示讚賞

Answer 1

1. 位置在身體之外的元素的CSS，的jsfiddle： http://jsfiddle.net/k3dKz/6/

Stil需要更新女孩的點擊事件，以製作其他方向的動畫。

1. 你沒有在這個網站鏈接jQuery，你的控制檯說'$沒有定義'，請確保你加載了jQuery，它應該可以工作。

Answer 2

您可以更改您的JavsScript以及CSS。你的CSS和animate()功能並沒有很好的定位元素。

$(document).ready(function() { 
    $('#slideboys button').click(function() { 
     var $lefty = $(this).next(); 
     $lefty.animate({ 
      left: parseInt($lefty.css('left'),10) == 0 ? 
      -$lefty.outerWidth() : 
      0 
     }); 
    }); 
    $('#slidegirls button').click(function() { 
     var $righty = $(this).next(); 
     $righty.animate({ 
      right: parseInt($righty.css('right'),10) == 0 ? 
      -$righty.outerWidth() : 
      0 
     }); 
    }); 
}); 

這裏是修正後加工小提琴http://jsfiddle.net/k3dKz/7/

也加入這一行;

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> 

或

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"> 

你的網頁的<header>部分內部，使你的代碼運行。

希望這會有所幫助...