1. ホーム
  2. 質問と答え
  3. jQueryフリップ要素が後続要素をオーバーラップする

jQueryフリップ要素が後続要素をオーバーラップする

2016-09-17 9 views
1

jQuery flip pluginを使用してノード内のejsファイル内の画像を反転しています。jQueryフリップ要素が後続要素をオーバーラップする

フリップアニメーションは機能しますが、フリップ要素の下の要素はフリップ要素と重なっています。私の問題を示して

シンプルコード：about.jsで

<head> 
    <title>James Riley</title> 
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
    <script src="https://cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script> 
</head> 
<body> 

    <div>Something before the flip</div> 
     <div id="flipImage"> 
      <div class="front">front content</div> 
      <div class="back">back content</div> 
     </div> 
    <div>Something after the flip</div> 

    <script type="text/javascript" src="scripts/about.js"></script> 
</body>

そして：

これが原因 
$("#flipImage").flip();

"フリップの後に何かが" フロント/バック内容と重複します。内容がテキストの場合、後続のテキストに文字通り書き込まれます。

ご迷惑をおかけして申し訳ありません。ご協力いただきありがとうございます！それはこのようになります

出典

2016-09-17 James Riley

答えて

-1

は、プラグインの既知の問題です：

「私は長いサイドバーで背中にそれを反転すると、それは は、サイドバーを埋めるためにコンテナを展開しません。代わりに、それだけで コンテンツと重なって...」

をあなたはgithub issue page.

のステータスを追跡することができますたぶん、あなたは代わりにCSSフリップトリックに興味があるだろうか？あなたは、彼らが前面と背面の要素を絶対位置決めされているソースを見ればここ はDavid Walsh

/* simple */ 
 

 
.flip-container { 
 
    -webkit-perspective: 1000; 
 
    -moz-perspective: 1000; 
 
    -ms-perspective: 1000; 
 
    perspective: 1000; 
 
    -ms-transform: perspective(1000px); 
 
    -moz-transform: perspective(1000px); 
 
    -moz-transform-style: preserve-3d; 
 
    -ms-transform-style: preserve-3d; 
 
    border: 1px solid #ccc; 
 
} 
 
/* 
 
\t \t \t .flip-container:hover .flipper, .flip-container.hover .flipper, #flip-toggle.flip .flipper { 
 
\t \t \t \t -webkit-transform: rotateY(180deg); 
 
\t \t \t \t -moz-transform: rotateY(180deg); 
 
\t \t \t \t -ms-transform: rotateY(180deg); 
 
\t \t \t \t transform: rotateY(180deg); 
 
\t \t \t \t filter: FlipH; 
 
    \t \t \t -ms-filter: "FlipH"; 
 
\t \t \t } 
 
\t \t \t */ 
 

 
/* START: Accommodating for IE */ 
 

 
.flip-container:hover .back, 
 
.flip-container.hover .back { 
 
    -webkit-transform: rotateY(0deg); 
 
    -moz-transform: rotateY(0deg); 
 
    -o-transform: rotateY(0deg); 
 
    -ms-transform: rotateY(0deg); 
 
    transform: rotateY(0deg); 
 
} 
 
.flip-container:hover .front, 
 
.flip-container.hover .front { 
 
    -webkit-transform: rotateY(180deg); 
 
    -moz-transform: rotateY(180deg); 
 
    -o-transform: rotateY(180deg); 
 
    transform: rotateY(180deg); 
 
} 
 
/* END: Accommodating for IE */ 
 

 
.flip-container, 
 
.front, 
 
.back { 
 
    width: 320px; 
 
    height: 427px; 
 
} 
 
.flipper { 
 
    -webkit-transition: 0.6s; 
 
    -webkit-transform-style: preserve-3d; 
 
    -ms-transition: 0.6s; 
 
    -moz-transition: 0.6s; 
 
    -moz-transform: perspective(1000px); 
 
    -moz-transform-style: preserve-3d; 
 
    -ms-transform-style: preserve-3d; 
 
    transition: 0.6s; 
 
    transform-style: preserve-3d; 
 
    position: relative; 
 
} 
 
.front, 
 
.back { 
 
    -webkit-backface-visibility: hidden; 
 
    -moz-backface-visibility: hidden; 
 
    -ms-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
    -webkit-transition: 0.6s; 
 
    -webkit-transform-style: preserve-3d; 
 
    -webkit-transform: rotateY(0deg); 
 
    -moz-transition: 0.6s; 
 
    -moz-transform-style: preserve-3d; 
 
    -moz-transform: rotateY(0deg); 
 
    -o-transition: 0.6s; 
 
    -o-transform-style: preserve-3d; 
 
    -o-transform: rotateY(0deg); 
 
    -ms-transition: 0.6s; 
 
    -ms-transform-style: preserve-3d; 
 
    -ms-transform: rotateY(0deg); 
 
    transition: 0.6s; 
 
    transform-style: preserve-3d; 
 
    transform: rotateY(0deg); 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.front { 
 
    -webkit-transform: rotateY(0deg); 
 
    -ms-transform: rotateY(0deg); 
 
    background: lightgreen; 
 
    z-index: 2; 
 
} 
 
.back { 
 
    background: lightblue; 
 
    -webkit-transform: rotateY(-180deg); 
 
    -moz-transform: rotateY(-180deg); 
 
    -o-transform: rotateY(-180deg); 
 
    -ms-transform: rotateY(-180deg); 
 
    transform: rotateY(-180deg); 
 
} 
 
.front .name { 
 
    font-size: 2em; 
 
    display: inline-block; 
 
    background: rgba(33, 33, 33, 0.9); 
 
    color: #f8f8f8; 
 
    font-family: Courier; 
 
    padding: 5px 10px; 
 
    border-radius: 5px; 
 
    bottom: 60px; 
 
    left: 25%; 
 
    position: absolute; 
 
    text-shadow: 0.1em 0.1em 0.05em #333; 
 
    display: none; 
 
    -webkit-transform: rotate(-20deg); 
 
    -moz-transform: rotate(-20deg); 
 
    -ms-transform: rotate(-20deg); 
 
    transform: rotate(-20deg); 
 
} 
 
.back-logo { 
 
    position: absolute; 
 
    top: 40px; 
 
    left: 90px; 
 
    width: 160px; 
 
    height: 117px; 
 
    background: url(logo.png) 0 0 no-repeat; 
 
} 
 
.back-title { 
 
    font-weight: bold; 
 
    color: #00304a; 
 
    position: absolute; 
 
    top: 180px; 
 
    left: 0; 
 
    right: 0; 
 
    text-align: center; 
 
    text-shadow: 0.1em 0.1em 0.05em #acd7e5; 
 
    font-family: Courier; 
 
    font-size: 22px; 
 
} 
 
.back p { 
 
    position: absolute; 
 
    bottom: 40px; 
 
    left: 0; 
 
    right: 0; 
 
    text-align: center; 
 
    padding: 0 20px; 
 
    font-size: 18px; 
 
} 
 
/* vertical */ 
 

 
.vertical.flip-container { 
 
    position: relative; 
 
} 
 
.vertical .back { 
 
    -webkit-transform: rotateX(180deg); 
 
    -moz-transform: rotateX(180deg); 
 
    -ms-transform: rotateX(180deg); 
 
    transform: rotateX(180deg); 
 
} 
 
.vertical.flip-container .flipper { 
 
    -webkit-transform-origin: 100% 213.5px; 
 
    -moz-transform-origin: 100% 213.5px; 
 
    -ms-transform-origin: 100% 213.5px; 
 
    transform-origin: 100% 213.5px; 
 
} 
 
/* 
 
\t \t \t .vertical.flip-container:hover .flipper { 
 
\t \t \t \t -webkit-transform: rotateX(-180deg); 
 
\t \t \t \t -moz-transform: rotateX(-180deg); 
 
\t \t \t \t -ms-transform: rotateX(-180deg); 
 
\t \t \t \t transform: rotateX(-180deg); 
 
\t \t \t } 
 
\t \t \t */ 
 

 
/* START: Accommodating for IE */ 
 

 
.vertical.flip-container:hover .back, 
 
.vertical.flip-container.hover .back { 
 
    -webkit-transform: rotateX(0deg); 
 
    -moz-transform: rotateX(0deg); 
 
    -o-transform: rotateX(0deg); 
 
    -ms-transform: rotateX(0deg); 
 
    transform: rotateX(0deg); 
 
} 
 
.vertical.flip-container:hover .front, 
 
.vertical.flip-container.hover .front { 
 
    -webkit-transform: rotateX(180deg); 
 
    -moz-transform: rotateX(180deg); 
 
    -o-transform: rotateX(180deg); 
 
    transform: rotateX(180deg); 
 
} 
 
/* END: Accommodating for IE */
<p>Mouse over the image below to see it flip!</p> 
 

 
<h2>Styled Card (Horizontal Flip)</h2> 
 
<div class="flip-container" ontouchstart="this.classList.toggle('hover');"> 
 
    <div class="flipper"> 
 
    <div class="front" style="background: url(https://davidwalsh.name/demo/dwflip.jpg) 0 0 no-repeat;"> 
 
     <span class="name">David Walsh</span> 
 
    </div> 
 
    <div class="back" style="background:#f8f8f8;"> 
 
     <div class="back-logo"></div> 
 
     <div class="back-title">@davidwalshblog</div> 
 
     <p>Mozilla Web Developer, MooTools & jQuery Consultant, MooTools Core Developer, Javascript Fanatic, CSS Tinkerer, PHP Hacker, and web lover.</p> 
 
    </div> 
 
    </div> 
 
</div> 
 
<br /> 
 
<br /> 
 

 
<h2>Styled Card (Vertical Flip)</h2> 
 
<div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');"> 
 
    <div class="flipper"> 
 
    <div class="front" style="background: url(https://davidwalsh.name/demo/dwflip.jpg) 0 0 no-repeat;"> 
 
     <span class="name">David Walsh</span> 
 
    </div> 
 
    <div class="back" style="background:#f8f8f8;"> 
 
     <div class="back-logo"></div> 
 
     <div class="back-title">@davidwalshblog</div> 
 
     <p>Mozilla Web Developer, MooTools & jQuery Consultant, MooTools Core Developer, Javascript Fanatic, CSS Tinkerer, PHP Hacker, and web lover.</p> 
 
    </div> 
 
    </div> 
 
</div> 
 
<br /> 
 
<br /> 
 

 

 
<h2>Toggle Flip (Horizontal)</h2> 
 
<div class="flip-container" id="flip-toggle"> 
 
    <div class="flipper"> 
 
    <div class="front" style="background: url(https://davidwalsh.name/demo/dwflip.jpg) 0 0 no-repeat;"> 
 
     <span class="name">David Walsh</span> 
 
    </div> 
 
    <div class="back" style="background:#f8f8f8;"> 
 
     <div class="back-logo"></div> 
 
     <div class="back-title">@davidwalshblog</div> 
 
     <p>Mozilla Web Developer, MooTools & jQuery Consultant, MooTools Core Developer, Javascript Fanatic, CSS Tinkerer, PHP Hacker, and web lover.</p> 
 
    </div> 
 
    </div> 
 
</div> 
 
<button onclick="document.querySelector('#flip-toggle').classList.toggle('hover');" class="sexyButton">Toggle Flip</button> 
 
<br /> 
 
<br /> 
 

 
<h2>Just The Basics (Horizontal Flip)</h2> 
 
<!-- card --> 
 
<div class="flip-container" ontouchstart="this.classList.toggle('hover');"> 
 
    <div class="flipper"> 
 
    <div class="front"> 
 
     front 
 
    </div> 
 
    <div class="back"> 
 
     back 
 
    </div> 
 
    </div> 
 
</div> 
 
<br /> 
 
<br />

出典

2016-09-18 00:21:51 NickyTheWrench

1

からクールな例です。それは少しハックかもしれませんが、あなたは、フリップ関数を呼び出すときに高さを設定できます。

var height = $("#flipImage").outerHeight(); 
$("#flipImage").flip().height(height);

をし、コンテナにこのスタイルを追加します。

display:flex; 
justify-content: flex-start

出典

2016-09-18 01:10:07 Derek

関連する問題

 関連する問題