简体   繁体   English

是否可以从右到左显示div的内容

[英]Is it possible to reveal the contents of a div from right to left

I created a fiddle 我制造了一个小提琴

http://jsfiddle.net/gifcy/bJJ5s/5/ http://jsfiddle.net/gifcy/bJJ5s/5/

On DOM ready I hide the image. 在DOM准备就绪时,我隐藏了图像。

I could successfully reveal the image from left to right using animate function. 我可以使用动画功能从左到右成功显示图像。

Can someone show how to reveal from right to left. 有人可以显示如何从右向左显示。 What additional parameters need to used. 需要使用哪些其他参数。

Use jquery ui show() function 使用jQuery ui show()函数

$(document).ready(function() {

    $('#nature').hide();

    $('#animation').click(function() {
       $('#nature').show('slide', {direction: 'right'},1000);


    });
});   
​

fiddle here http://jsfiddle.net/bJJ5s/6/ 在这里摆弄http://jsfiddle.net/bJJ5s/6/

Pretty sure this will work cross browser 相当确定这可以跨浏览器运行

#nature,
#nature img {
    float:right;
}​

http://jsfiddle.net/g8zDk/ http://jsfiddle.net/g8zDk/

过渡<div>从右到左</div><div id="text_translate"><p>我希望右侧的 div 从右向左过渡,而左侧的 div 从左向右过渡。</p><p> 左边的那个自然是从左到右移动,但是我如何让右边的那个从右到左移动。</p><p> 这是我使用的代码。 </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-js lang-js prettyprint-override"> function showmeme(){ document.getElementById('memes').style.width = "100%"; document.getElementById('game').style.width = "0%"; document.getElementById("memes").style.transition = "all 0.5s"; document.getElementById("game").style.transition = "all 0.5s"; var game= document.getElementsByClassName('game'); for(var i=0;i&lt;game.length;i++){ game[i].style.display='none'; } } function showgame(){ document.getElementById('game').style.width = "100%"; document.getElementById('memes').style.width = "0%"; document.getElementById("memes").style.transition = "all 0.5s"; document.getElementById("game").style.transition = "all 0.5s"; var memes= document.getElementsByClassName('memes'); for(var i=0;i&lt;memes.length;i++){ memes[i].style.display='none'; } }</pre><pre class="snippet-code-css lang-css prettyprint-override"> .body{ border: 1px solid black; display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }.memes{ display: flex; justify-content: center; align-items: center; border: 1px solid black; width:48%; height: 500px; }.game{ display: flex; justify-content: center; align-items: center; border: 1px solid black; width:48%; height: 500px; }.butn{ width: 200px; height: 50px; }</pre><pre class="snippet-code-html lang-html prettyprint-override"> &lt;div class="body"&gt; &lt;div class="memes" id="memes"&gt; &lt;button class="butn" onclick="showmeme()"&gt;make a meme&lt;/button&gt; &lt;/div&gt; &lt;div class="game" id="game"&gt; &lt;button class="butn" onclick="showgame()"&gt;play meme games&lt;/button&gt; &lt;/div&gt; &lt;/div&gt;</pre></div></div><p></p></div> - Transition <Div> from right to left

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 向左显示输入而不是向右 - Reveal input to the left not the right 纯css从左到右显示文本的效果 - Effect to reveal the text from left to right in pure css 从右到左追加div - Append div from right to left 从左到右填充Div - Populate Div from Left to Right 从右 &gt; 向左滑动 div - Sliding a div from right > to left < 从左到右对div进行动画处理 - Animate div from left to right 过渡<div>从右到左</div><div id="text_translate"><p>我希望右侧的 div 从右向左过渡,而左侧的 div 从左向右过渡。</p><p> 左边的那个自然是从左到右移动,但是我如何让右边的那个从右到左移动。</p><p> 这是我使用的代码。 </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-js lang-js prettyprint-override"> function showmeme(){ document.getElementById('memes').style.width = "100%"; document.getElementById('game').style.width = "0%"; document.getElementById("memes").style.transition = "all 0.5s"; document.getElementById("game").style.transition = "all 0.5s"; var game= document.getElementsByClassName('game'); for(var i=0;i&lt;game.length;i++){ game[i].style.display='none'; } } function showgame(){ document.getElementById('game').style.width = "100%"; document.getElementById('memes').style.width = "0%"; document.getElementById("memes").style.transition = "all 0.5s"; document.getElementById("game").style.transition = "all 0.5s"; var memes= document.getElementsByClassName('memes'); for(var i=0;i&lt;memes.length;i++){ memes[i].style.display='none'; } }</pre><pre class="snippet-code-css lang-css prettyprint-override"> .body{ border: 1px solid black; display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }.memes{ display: flex; justify-content: center; align-items: center; border: 1px solid black; width:48%; height: 500px; }.game{ display: flex; justify-content: center; align-items: center; border: 1px solid black; width:48%; height: 500px; }.butn{ width: 200px; height: 50px; }</pre><pre class="snippet-code-html lang-html prettyprint-override"> &lt;div class="body"&gt; &lt;div class="memes" id="memes"&gt; &lt;button class="butn" onclick="showmeme()"&gt;make a meme&lt;/button&gt; &lt;/div&gt; &lt;div class="game" id="game"&gt; &lt;button class="butn" onclick="showgame()"&gt;play meme games&lt;/button&gt; &lt;/div&gt; &lt;/div&gt;</pre></div></div><p></p></div> - Transition <Div> from right to left 从右到左然后再从左到右对div进行动画处理 - Animate div from right to left and then from left to right again 在div中如何从右到左追加物品? - In a div how to append items from right to left? 从左到右旋转相同的div - Rotate same div from left to right
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM