动画功能无法正常工作

我试图制作两个按钮，当点击时滑动并将另一个按钮从视口中移出。例如：动画功能无法正常工作

点击之前 - [蓝色|灰色]

点击蓝色 - [全部蓝色]

获取它吗？我有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

动画功能无法正常工作

回答

相关问题