動畫功能無法正常工作

我試圖製作兩個按鈕，當點擊時滑動並將另一個按鈕從視口中移出。例如：動畫功能無法正常工作

點擊之前 - [藍色|灰色]

點擊藍色 - [全部藍色]

獲取它嗎？我有HTML和CSS設置完美（我認爲），但我不能讓這個jQuery代碼動畫和更改包含兩個按鈕的元素的位置。這讓我瘋狂。我到目前爲止是：

<div id='container'> 
    <div id='wrapper'> 
     <a id='wrapper_photo' href=""></a> 
     <a id='wrapper_video' href=""></a> 
    </div> 
</div> 
<style> 
    #container{ 
     width:760px; 
     height:25px; 
     background:#000000; 
     overflow:hidden; 
    } 

    #wrapper { 
     width:1520px; 
     height:25px; 
     background-color:#0F0; 
     position:relative; 
     left:-380px; 
    } 

    #wrapper_photo{ 
     width:760px; 
     height:25px; 
     background-color:#666666; 
     float:left; 
    } 

    #wrapper_video { 
     width:760px; 
     height:25px; 
     background-color:#0000CC; 
     float:left; 
    } 
</style> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#wrapper_photo').click(function() { 
      $('#wrapper').animate({ 
       left:"-=380"}, 
      5000); 
     }); 
    }); 
</script>

我停止了，當我不能左側工作。

來源

2014-09-22 Kev

在這裏你去：DEMO

$(function(){ 
    $('#wrapper_photo, #wrapper_video').click(function() { 
     $(this).animate({ 
      width:"100%"}, 
      5000); 
     $(this).siblings('a').animate({ 
      width:'0px' 
     },5000); 
    }); 
});

來源

2014-09-22 22:26:35

在小提琴上工作很好，但是當我將所有內容上傳到我的網站時，沒有任何動作。有任何想法嗎？ – Kev 2014-09-22 22:51:20

你有沒有正確包含jQuery庫？你是否將代碼包裝在文檔就緒函數中？ – 2014-09-22 22:53:21

我將代碼包裝在一個準備好的函數中，如果該函數庫正確地包含在HTML中，它應該可以工作 – 2014-09-22 22:56:45

我不知道如果離開了這個新的值將被設置，這樣你就可以使用position()function獲得的#wrapper容器left值，然後計算新的價值。

$(document).ready(function() { 
    $('#wrapper_photo').click(function() { 
     var leftVal = $('#wrapper').position().left - 380; 
     $('#wrapper').animate({ 
      left:leftVal}, 
      5000); 
    }); 
});

來源

2014-09-22 22:28:06 marian0

動畫功能無法正常工作

回答

相關問題