jQuery動畫在小提琴中工作但在線不流暢

Question

我在小提琴中制作了一種帶有三個擴展div（ #a ， #b ， #b #c ）的手風琴，但是當我在本地保存並在瀏覽器中打開它時，過渡不再平滑。 點擊#b后我特意注意#a擴展。 我已經包含了引用CSS和JavaScript代碼的HTML。 原因是什么，解決它的最佳方法是什么？

<head>
     <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
     <link rel="stylesheet" href="style.css" />
</head>
<body>
    <div class="wrapper">
        <div class="outer">
            <div class="middle">
                <div class="inner" id="a">1</div> 
                <div class="inner" id="b">2</div> 
                <div class="inner" id="c">3</div> 
            </div>
        </div>
    </div>
    <script src="accordion.js"></script>
</body>

這是一個小提琴的鏈接： http ： //jsfiddle.net/tJugd/3794/

現在看來似乎只發生在任何#a擴大和#b或#c被點擊或#b擴大和#c被點擊。

Answer 1

嘗試使用單個click事件處理程序用於與動畫.animate() easings屬性設置為"linear" ， css transition為效果中，設置width的.middle div元素33%

 $(".middle div").click(function() { $(this).siblings().animate({ width: "10%", opacity: 0.6 }, 0, "linear"); $(this).animate({ width: "80%", opacity: 1 }, 0, "linear"); });

 div.inner { max-width: 0; display: table-cell; overflow: hidden; } div.outer { display: table; overflow: hidden; width: 100%; height: 100%; } div.middle { display: table-row; overflow: hidden; } #holder { width: 100%; height: 100%; margin: 0px auto; overflow: hidden; position: fixed; } #a { width: 33%; height: 100%; background-color: red; } #b { width: 33%; height: 100%; background-color: blue; } #c { width: 33%; height: 100%; background-color: green; } .wrapper { height: 90vh; overflow: hidden; } #a, #b, #c { transition: width 500ms, opacity 500ms; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <div class="wrapper"> <div class="outer"> <div class="middle"> <div class="inner" id="a">1</div> <div class="inner" id="b">2</div> <div class="inner" id="c">3</div> </div> </div> </div>

jsfiddle http://jsfiddle.net/tJugd/3798/

Answer 2

試試這個

 window.onload = function() { [].forEach.call(document.querySelectorAll('.inner'), function(el) { el.addEventListener('click', function(e) { this.parentElement.className = 'middle ' + this.id; }); }); } //]]>

 div.inner { max-width: 0; display: table-cell; overflow: hidden; } div.outer { display: table; overflow: hidden; width: 100%; height: 100%; } div.middle { display: table-row; overflow: hidden; } #holder { width: 100%; height: 100%; margin: 0px auto; overflow: hidden; position: fixed; } #a { height: 100%; background-color: red; } #b { height: 100%; background-color: blue; } #c { height: 100%; background-color: green; } #a, #b, #c { width: 10%; opacity: 0.6; transition: all 3000ms; } .middle.a #a, .middle.b #b, .middle.c #c { width: 80%; opacity: 1; } .wrapper { height: 90vh; overflow: hidden; }

 <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>- jsFiddle demo</title> </head> <body> <div class="wrapper"> <div class="outer"> <div class="middle c"> <div class="inner" id="a">1</div> <div class="inner" id="b">2</div> <div class="inner" id="c">3</div> </div> </div> <div class="wrapper"> </div> </div> </body> </html>

jQuery動畫在小提琴中工作但在線不流暢

問題描述

2 個解決方案

解決方案1
6 已采納 2015-10-29 04:37:24

解決方案2
0 2015-10-29 08:11:22

jQuery動畫在小提琴中工作但在線不流暢

問題描述

2 個解決方案

解決方案1 6 已采納 2015-10-29 04:37:24

解決方案2 0 2015-10-29 08:11:22

解決方案1
6 已采納 2015-10-29 04:37:24

解決方案2
0 2015-10-29 08:11:22