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觸發動畫

回答

相關問題