JQuery/CSS触发动画

我正在做一个网站。我试图让这个平行四边形消失，当我点击下一部分的按钮。它与asnwers下来的工作，现在，但现在我想改变右方向>左到左 - >右我也有相同的动画无线的高度，所以它隐藏在盒子JQuery/CSS触发动画

$(document).ready(function() { 
 
    $("a.article").click(fucntion() { 
 
    var para = $("#parallelogram"); 
 
    para.animate({ 
 
     width: '0px' 
 
    }, "slow"); 
 
    }); 
 
});

#parallelogram { 
 
    width: 600px; 
 
    height: 400px; 
 
    background: white; 
 
    -webkit-transform: skew(-20deg); 
 
    -moz-transform: skew(-20deg); 
 
    -o-transform: skew(-20deg); 
 
    position: relative; 
 
    top: 200px; 
 
    left: 430px; 
 
    -webkit-transition: width 1s; 
 
    /* For Safari 3.1 to 6.0 */ 
 
    transition: width 1s; 
 
} 
 
#parallelogram:active { 
 
    width: 0px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <ul> 
 
    <li><a class="article" href="#article">Article</a> 
 
    </li> 
 
    </ul> 
 
</nav> 
 

 

 
<div class="page" id="content"> 
 
    <div id="parallelogram"> 
 

 
    </div> 
 
</div>

如何使它从左到右？

P.S.品牌在JQuery中

来源

2016-10-06 Georgi Stefanov

你有一个错字。 'fucntion'应该是'function'。 –

Rory McCrossan是对的：http://output.jsbin.com/yaqufihufu –

是的罗里是对的。测试：https：//jsfiddle.net/896xvpe4/。 –

这里新来修复您的JS

$(function(){ 
$('.article').click(function(){ 
    var para = $("#parallelogram"); 
    para.animate({ 
     width: '0px' 
    }, "slow"); 
}) 
})

DEMO

来源

2016-10-06 09:58:23 Fiido93

谢谢你的回答 –

哎根据你的代码

$(function(){ 
$('.article').click(function(){ 
$("#parallelogram").animate({ 
    width: '0px' 
}, "slow"); 
}) 
}

用更少的代码试试这个招呼右移 - 左移ee值以下小提琴和定制

fiddle Demo

来源

2016-10-06 16:06:53

我该如何让它从右→左→左→→ –

看到更新答案与小提琴 –

宽度应为0.我想隐藏它完全。宽度：0它只是将它移动一点点，但仍然是从右到左的开始动画 –

JQuery/CSS触发动画

回答

相关问题